自動で折り返し、良い感じに幅が伸縮するリストを作る
結論
cssなら
css.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: 10px;
}tailwindなら
ts <ul className="grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-4">
<li>..</li>
...
</ul>特徴
Containerのサイズによって、列数が変わる
1行に、何列表示するかは指定しない
Itemの幅の最小値を指定する
自動で折り返す
1行でも画面幅いっぱいに広がる
複数行になってもスタイルが崩れない
適当な隙間がある
Itemは左詰めになるとかではなく、Container幅全体に分布する
mediaqueryを使わない
flex を使った場合、以下の要件を満たしたいイメージContainerは以下を満たす
flex flex-wrap justify-between gap Itemは以下を満たす
grow 最終列も、他の行に従う
flex だとここの実現が難しいmediaqueryは使いたくない
しかし、flexでやるのは難しい
afterとかbeforeとか使えば出来るらしいが、hack感が漂う
上がGrid、下がFlex
Flexは一方向しか扱えない
2列以上になった際に、最終列が、1列の時と同じ挙動になってしまう
逆に言えば、最終列を、上の列と同じように配置することが出来ない
Gridを使うことで、行と列を同時に扱うことが出来る
懸念点
アイテムが少ない時にめちゃくちゃ伸びてしまう
>#WIP
girdのやつの問題点
minmax(px, fr) の px よりも、viewport幅が狭い場合に、はみ出るflex-basisならこれを解決できる