目次
display: grid; は flex よりも 複雑なレイアウト（たとえばカードを縦横に並べたい場合）に向いており、レスポンシブデザインとの相性も抜群です。基本から順に、実例も含めて説明します。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列、幅は均等 */
gap: 16px; /* 要素間の隙間 */
}- grid-template-columns: 列の数と幅を定義
- gap: 要素間の隙間（上下左右）
- 1fr: 余白を均等に分ける単位
