もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

Flexboxも横並びレイアウト用のモジュールですが、2次元的な行と列を指定するGridと1次元的な横配列を指定するFlexboxでは使い所が異なります。Gridはページ構造を指定することに適しているのに対して、Flexboxはどちらかと言うとコンポーネント内部のレイアウトに適しています。

ここでは、CSSのgrid-template-columnsは、CSS Grid レイアウトにおける列の幅と数を定義するプロパティでについて、実務でよく使うパターンを体系的に解説します。

1. 固定幅のカラム

.container {
  display: grid;
  grid-template-columns: 200px 300px 150px;
}

解説

• 3列構成
• 幅はそれぞれ固定（200px / 300px / 150px）
• レスポンシブには不向き

2. fr単位（割合分配）

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

解説

• 利用可能な余白を「比率」で分配
• 1 : 2 : 1 の割合
• 実務で最も使用頻度が高い

例：左右ナビ＋メインコンテンツ

3. repeat()の使用

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

解説

• 1fr の列を3つ作る
• 可読性が高く、列数変更も容易

固定幅版

grid-template-columns: repeat(4, 200px);

minmax()を使ったレスポンシブ設計

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}

解説

• 最小150px
• 最大は均等分割
• 画面幅に応じて自然に伸縮

5. auto-fit / auto-fill（カードレイアウト定番）

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

特徴

• 横幅に応じて自動で列数が増減
• モダンなカードUIの定番構成
• メディアクエリ不要なケースも多い

6. 固定 + 可変の混在

.container {
  display: grid;
  grid-template-columns: 250px 1fr;
}

用途例

• 左サイドバー固定
• 右コンテンツ可変

7. autoの使用

grid-template-columns: auto 1fr auto;

意味

• コンテンツ幅に応じて自動調整
• 中央だけ余白分配

8. 名前付きグリッドライン

.container {
  display: grid;
  grid-template-columns: 
    [sidebar-start] 250px 
    [sidebar-end content-start] 1fr 
    [content-end];
}

メリット

• 大規模レイアウトで可読性向上
• grid-columnで名前参照可能

実務で有用なGridレイアウト

カード一覧（レスポンシブ）

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

管理画面レイアウト

grid-template-columns: 240px 1fr;

3カラム基本形

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

実務では「固定幅＋1fr」「repeat(auto-fit, minmax())」の2パターンを理解していれば、多くのレイアウトに対応できます。重要なのは値を暗記することではなく、どのように余白が分配されるかを理解することです。挙動を把握した上で設計すれば、Gridは非常に強力なレイアウト手法になります。