CSS Grid 生成

生成されるコンテナ

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;

@media (max-width: 660px) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

• repeat(3, minmax(0, 1fr)): 利用可能な幅を均等に分ける3列。1fr は残りのスペースの1分画で、minmax(0, 1fr) は列がコンテンツサイズより小さく縮むのを許します。
• gap: 各トラック間の余白。
• メディアクエリは repeat(auto-fit, minmax(220px, 1fr)) に切り替わり、それぞれ220px以上の列を可能な限り作ります。ブレークポイントは列数×最小幅（120pxが下限）なので、小さな画面では列が圧縮されずに折り返されます。

fr 単位

fr は「残りのスペースの1分画」という意味です。固定サイズのトラックを差し引いた後、残りのスペースを fr 単位の合計数で割ります。

grid-template-columns: 200px 1fr 2fr;

1000px のコンテナでは、最初の列が200pxを占め、残りの800pxが1:2に分かれて267pxと533pxになります。

auto-fill と auto-fit

• auto-fill: アイテムが足りないとき、空のプレースホルダートラックを作ります。
• auto-fit: 空のトラックをゼロに畳み、残りのアイテムが伸びて行を埋めます。

レスポンシブ代替はカードグリッドに適した auto-fit を使い、行がいつも埋まって見えます。

列幅を変える

ジェネレーターは等幅の列を出力します。サイズを混ぜたいときは結果を編集します: grid-template-columns: 200px 1fr 2fr; で固定サイドバーと1:2の可変2列になります。名前付きエリア（grid-template-areas）や明示配置（grid-column: 1 / 3）は、生成されたコンテナの上に手で追加します。

Grid と Flexbox

• Grid: トラックによる明示的な2次元レイアウト。行と列の構造を持つレイアウト（ページの骨格、ギャラリー、ダッシュボード）に向きます。
• Flexbox: 単一の軸に沿った1次元の整列。アイテムが自然に流れる場面（ナビバー、ボタンの並び）に向きます。

実際のレイアウトは通常両方を組み合わせます。ページの骨格に Grid、コンポーネント内に Flexbox です。

よくある落とし穴

• 子要素の min-width: 0 を忘れる: グリッドアイテムはデフォルトでコンテンツの最小幅を使うため、fr 列が最長の単語より縮めません。子に min-width: 0 を指定して縮めるのを許しましょう。
• display: grid なしで入れ子にする: グリッドの子は、自分で宣言しない限りグリッドにはなりません。