CSS Gridの使い方｜2カラム・自動折り返し・aspect-ratio

CSS Gridの使い方とは

CSS Grid は、行と列の両方を決めて要素を配置できるレイアウト機能です。親に display: grid を書き、grid-template-columns で列を定義します。2カラムのページ構成や、カードの一覧、画像ギャラリーなどが、少ないコードで書けます。1方向の並びを扱う Flexbox と使い分けます。

基本（構文・仕組み）

MDN では、gap はトラックを確保してから fr を分ける、と説明されています。つまり gap を取ったあとの幅が fr に分配されます。

.g {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.lay {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "head head"
    "side main"
    "foot foot";
  gap: 12px;
}
.h { grid-area: head; } .s { grid-area: side; }
.m { grid-area: main; } .f { grid-area: foot; }
@media (max-width: 600px) {
  .lay {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "main" "side" "foot";
  }
}

aspect-ratio: 16/9 を子に指定すると、画像やカードの縦横比を保てます。float で作っていた段組みの置き換えとしても便利です。

サンプルコード（実行結果つき）

<style>
.g { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.g > div { background: #9cf; aspect-ratio: 16/9; padding: 8px; }
</style>
<div class="g"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div>

動作確認（検証環境と結果）

• 環境: Windows 11 / Microsoft Edge 154（Chromium系、headless）/ render.ps1（-Width 1200 と 390）、getComputedStyle().gridTemplateColumns
• ファイル: C:Tempks2techtestst2grid.html、画面は grid-390.png で目視

aspect-ratio: 16/9 のカードは、幅236pxで高さ140pxでした。16:9なら132.8pxのはずですが、padding 8px が content-box で加算されたためです。box-sizing を border-box にすると、カード全体で比率が守られます。

CSS Gridの使い方の注意点

• 子要素の「列数が自動で決まる」のは auto-fill / auto-fit と minmax() の組み合わせです。固定列数なら repeat(3, 1fr) を使います。
• 1fr の最小サイズは中身に依存し、長い文字列で列が広がることがあります。minmax(0, 1fr) で抑える方法があります。
• grid-template-areas の領域は長方形でなければなりません。
• 古いブラウザへの対応は can I use で確認します。

CSS Gridの使い方でよくあるミス

• display: grid を子に書いている（親に書く）。
• gap の代わりに margin を使い、端に余白が出る。
• 2カラムで width: 70% と width: 30% にして、gap を足して崩れる（Grid なら 1fr を使う）。
• aspect-ratio に padding を足して、比率がずれる。

ブラウザ対応・バージョン

CSS Grid は主要ブラウザで対応済みで、gap、aspect-ratio も現在のブラウザで使えます。サブグリッドなど新しい機能は、MDN の Browser compatibility で確認してください。

CSS Gridの使い方のチェックリスト

• 親に display: grid を書いたか。
• 列は fr と minmax() で柔軟に作ったか。
• スマホ幅で1列になるか、実際に確認したか。
• 画像・カードの比率に aspect-ratio を使い、box-sizing も確認したか。

CSS Gridの使い方のFAQ（よくある質問）

Q. auto-fill と auto-fit の違いは？
A. 列が余るとき、auto-fill は空の列を残し、auto-fit は空の列を潰して、残りの列を広げます。

Q. Grid と Flexbox は併用できますか？
A. できます。全体の枠組みは Grid、各ブロックの中の並びは Flexbox、という構成がよくあります。

Q. float の2カラムは Grid に置き換えられますか？
A. 多くの場合、置き換えられます。clearfix が不要になり、高さも揃えやすくなります。

CSS Gridの使い方の関連項目

• Flexbox
• CSS中央寄せ
• box-sizing
• rem・em・vh
• レスポンシブWebデザインを実装してみて分かった11＋αのポイント