旧記事の誤りを修正
旧記事にはFlexboxへgrid-template-columnsを指定できるという誤解を招く説明がありました。grid-template-columnsはGrid Layout用で、Flexboxの列幅はflex-basisやflexプロパティで調整します。
要素間の余白にはgapを利用できます。marginで端だけ調整するより、レイアウトの意図が明確です。
基本のカードレイアウト
flex-growを1にすると余った幅を分け合い、flex-basisでカードの基準幅を指定できます。狭い画面ではmin()によって1列へ収まります。
.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
flex: 1 1 min(100%, 18rem);
}列数を厳密に揃える場合
常に3列など、二次元的な列の整列が重要ならGridの方が適しています。Flexboxはコンテンツの流れ、Gridは行と列の設計を軸に選びます。
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: 1rem;
}よくある失敗
- flex-wrapを指定せず横方向へはみ出す
- 子要素へ固定幅を指定し、狭い画面で縮められない
- FlexboxとGridのプロパティを混同する
- gapとmarginを重ねて余白を二重にする
