自動で折り返し、良い感じに幅が伸縮するリストを作る

https://gyazo.com/f62557caed73b1649240925c509b6b18 https://codepen.io/mrsekut/pen/poZXNxv

結論

cssなら

code:css

.grid-container {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));

gap: 10px;

}

tailwindなら

code:ts

<li>..</li>

...

</ul>

特徴

Containerのサイズによって、列数が変わる

1行に、何列表示するかは指定しない

Itemの幅の最小値を指定する

自動で折り返す

1行でも画面幅いっぱいに広がる

複数行になってもスタイルが崩れない

適当な隙間がある

Itemは左詰めになるとかではなく、Container幅全体に分布する

mediaqueryを使わない

Containerは以下を満たす

flex

flex-wrap

justify-between

gap

Itemは以下を満たす

grow

最終列も、他の行に従う

mediaqueryは使いたくない

しかし、flexでやるのは難しい

afterとかbeforeとか使えば出来るらしいが、hack感が漂う

https://gyazo.com/b111a6dd634f5eba70561098f6ededf1 https://codepen.io/mrsekut/pen/poZXNxv

上がGrid、下がFlex

Flexは一方向しか扱えない

2列以上になった際に、最終列が、1列の時と同じ挙動になってしまう

逆に言えば、最終列を、上の列と同じように配置することが出来ない

Gridを使うことで、行と列を同時に扱うことが出来る

懸念点

アイテムが少ない時にめちゃくちゃ伸びてしまう

https://gyazo.com/b3543a494b9284d5223f9c6a63f11001

girdのやつの問題点

flex-basisならこれを解決できる