Widely available YES。全主要ブラウザで長期サポート済み。ページレイアウトの標準手法として推奨。

CSS Grid Layout

grid は CSS のプロパティで、一括指定プロパティとして明示的・暗黙的なすべてのグリッドプロパティを単一の宣言で設定します。

grid を使用すると、一方の軸を grid-template-rows または grid-template-columns を使用して設定し、もう一方の軸でどのように内容物を自動反復させるかを、暗黙のグリッドプロパティである grid-auto-rows, grid-auto-columns, grid-auto-flow で設定します。

レイアウトグリッド

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
grid
57
16
52
10.1
57
10.3
grid context

グリッドレイアウトでサポートされています
57
16
52
10.1
52
10.3
grid context

グリッドレイアウトでサポートされています
57
16
52
10.1
52
10.3
grid context.start end

「開始」と「終了」
57
79
52
11
57
11
grid context

グリッドレイアウトでサポートされています
57
16
52
10.1
52
10.3
grid context

グリッドレイアウトでサポートされています
66
16
61
12
66
12
grid
57
16
52
10.1
57
10.3
inline-grid
57
16
52
10.1
57
10.3
その他
css.properties.gap

gap は CSS の一括指定プロパティで、行や列の間のすき間（gutters）を設定します。このプロパティは段組み、フレックス、グリッドコンテナーに適用します。
57
16
52
10.1
57
10.3
CSS プロパティ
grid context

グリッドレイアウトでサポートされています
66
16
61
12
66
12
grid context.calc values

`calc()` の値
66
16
52
12.1
66
12.2
grid context.percentage values

`<パーセント>` 値
66
16
52
11
66
11
normal
57
16
52
10.1
57
10.3
その他
css.properties.grid-area

grid-area は CSS の一括指定プロパティで、グリッドアイテムの寸法とgrid内での位置を指定し、線、スパン、指定するために、グリッド配置に線や区間を指定したり、何も指定しなかったり（自動）することで、grid areasの端を指定します。
57
16
52
10.1
57
10.3
css.properties.grid-auto-columns

grid-auto-columns は CSS のプロパティで、暗黙的に生成されたグリッドの列grid tracksまたはトラックのパターンの大きさを指定します。
57
16
70
10.1
57
10.3
css.properties.grid-auto-flow

grid-auto-flow は CSS のプロパティで、自動配置のアルゴリズムの動作を制御し、自動配置されたアイテムがどのようにグリッドに流れ込むかを正確に指定するものです。
57
16
52
10.1
57
10.3
CSS プロパティ
column
57
79
52
10.1
57
10.3
dense
57
79
52
10.1
57
10.3
row
57
79
52
10.1
57
10.3
その他
css.properties.grid-auto-rows

grid-auto-rows は CSS のプロパティで、暗黙的に生成されたグリッドの行grid tracksまたはトラックのパターンの大きさを指定します。
57
16
70
10.1
57
10.3
css.properties.grid-column

grid-column は CSS の一括指定プロパティで、グリッドアイテムの寸法とgrid column内での位置を指定します。グリッド配置に線や区間を指定したり、何も指定しなかったり（自動）することで、grid areasの行の先頭と末尾の端を指定します。
57
16
52
10.1
57
10.3
css.properties.grid-column-end

grid-column-end は CSS のプロパティで、グリッド列内のグリッドアイテムの末尾位置を指定します。グリッド配置に線や区間を指定したり、何も指定しなかったり（自動）することで、grid areasのブロック方向の末尾側の端を指定します。
57
16
52
10.1
57
10.3
css.properties.grid-column-start

grid-column-start は CSS のプロパティで、グリッド列内のグリッドアイテムの先頭位置を指定します。グリッド配置に線や区間を指定したり、何も指定しなかったり（自動）することで、grid areasのブロック方向の先頭側の端を指定します。
57
16
52
10.1
57
10.3
css.properties.grid-row

grid-row は CSS の一括指定プロパティで、grid rowの中におけるグリッドアイテムの寸法と位置を指定します。グリッド配置に線や区間を指定したり、何も指定しなかったり（自動）することで、grid areasのインライン方向の先頭と末尾の端を指定します。
57
16
52
10.1
57
10.3
css.properties.grid-row-end

grid-row-end は CSS のプロパティで、グリッド行の中におけるグリッドアイテムの末尾の位置を指定します。グリッド配置に線や区間を指定したり、何も指定しなかったり（自動）することで、grid areasのインライン方向の末尾の端を指定します。
57
16
52
10.1
57
10.3
css.properties.grid-row-start

grid-row-start は CSS のプロパティで、グリッド行の中におけるグリッドアイテムの先頭の位置を指定します。グリッド配置に線や区間を指定したり、何も指定しなかったり（自動）することで、grid areasのインライン方向の先頭の端を指定します。
57
16
52
10.1
57
10.3
css.properties.grid-template

grid-template は CSS のプロパティで、一括指定プロパティとして grid column、grid_row、grid areas を定義します。
57
16
52
10.1
57
10.3
css.properties.grid-template-areas

grid-template-areas は CSS のプロパティで、グリッド内でセルを確立し、名前を割り当てることにより、名前付きの grid areas を指定します。
57
16
52
10.1
57
10.3
CSS プロパティ
none
57
79
52
10.1
57
10.3
その他
css.properties.grid-template-columns

grid-template-columns は CSS のプロパティで、grid columnの線名とトラックのサイズ変更機能を定義します。
57
16
52
10.1
57
10.3
CSS プロパティ
auto
57
79
52
10.1
57
10.3
fit-content

fit-content() は CSS の関数で、指定された寸法を min(最大サイズ, max(最小サイズ, 引数)) の式に従って有効な範囲の寸法に収めます。
57
16
52
10.1
57
10.3
max-content
57
79
52
10.1
57
10.3
min-content
57
79
52
10.1
57
10.3
minmax

minmax() は CSS の関数で、寸法の範囲を min 以上、 max 以下で定義します。 CSS グリッドで使用されます。
57
16
52
10.1
57
10.3
none
57
79
52
10.1
57
10.3
repeat

repeat() は CSS の関数で、トラックリスト内での部分的な繰り返しを表し、繰り返しパターンを示す多数の列や行を、よりコンパクトな形式で記述することができます。
57
16
76
10.1
57
10.3
その他
css.properties.grid-template-rows

grid-template-rows は CSS のプロパティで、grid_rowの線名とトラックのサイズ変更機能を定義します。
57
16
52
10.1
57
10.3
CSS プロパティ
auto
57
79
52
10.1
57
10.3
fit-content

fit-content キーワードは fit-content_function と同等です。実際には、ボックスは利用可能な空間を使用しますが、 max-content 以上にはならないことを意味します。
57
16
52
10.1
57
10.3
max-content
57
79
52
10.1
57
10.3
min-content
57
79
52
10.1
57
10.3
minmax

minmax() は CSS の関数で、寸法の範囲を min 以上、 max 以下で定義します。 CSS グリッドで使用されます。
57
16
52
10.1
57
10.3
none
57
79
52
10.1
57
10.3
repeat

repeat() は CSS の関数で、トラックリスト内での部分的な繰り返しを表し、繰り返しパターンを示す多数の列や行を、よりコンパクトな形式で記述することができます。
57
16
76
10.1
57
10.3
none
57
79
52
10.1
57
10.3
grid context

グリッドレイアウトでサポートされています
57
16
52
10.1
52
10.3
grid context

グリッドレイアウトでサポートされています
57
16
45
10.1
57
10.3
その他
css.properties.justify-self

CSS の justify-self プロパティは、配置コンテナーの適切な軸に沿って内部でボックスの位置合わせをする方法を設定します。
57
16
45
10.1
57
10.3
CSS プロパティ
auto
57
79
45
10.1
57
10.3
grid context

グリッドレイアウトでサポートされています
57
16
45
10.1
57
10.3
left
57
79
45
10.1
57
10.3
normal
57
79
45
10.1
57
10.3
right
57
79
45
10.1
57
10.3
stretch
57
79
45
10.1
57
10.3
grid context

グリッドレイアウトでサポートされています
59
79
53
11
59
11
grid context

グリッドレイアウトでサポートされています
59
79
45
11
59
11
grid context

グリッドレイアウトでサポートされています
59
79
45
11
59
11
その他
css.properties.row-gap

row-gap は CSS のプロパティで、要素のグリッド行の間のすき間（gutters）の寸法を定義します。
47
16
52
10.1
47
10.3
CSS プロパティ
grid context

グリッドレイアウトでサポートされています
66
16
61
12
66
12
normal
47
16
52
10.1
47
10.3
その他
css.types.flex

は CSS のデータ型で、グリッドコンテナー内部における可変の長さを記述します。 grid-template-columns や grid-template-rows およびほかの関連プロパティで使われます。
29
12
40
10.1
29
10.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • 以前は別名で対応していました: grid-column-gap (57)
注釈 1件
対応条件
  • 以前は別名で対応していました: grid-column-gap (16)
注釈 1件
対応条件
  • 以前は別名で対応していました: grid-column-gap (52)
注釈 1件
対応条件
  • 以前は別名で対応していました: grid-column-gap (10.1)
注釈 1件
対応条件
  • 以前は別名で対応していました: grid-column-gap (57)
注釈 1件
対応条件
  • 以前は別名で対応していました: grid-column-gap (10.3)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -ms- (12)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -ms- (12)
注釈 1件
対応条件
  • 以前は別名で対応していました: grid-gap (57)
注釈 1件
対応条件
  • 以前は別名で対応していました: grid-gap (16)
注釈 1件
対応条件
  • 以前は別名で対応していました: grid-gap (52)
注釈 1件
対応条件
  • 以前は別名で対応していました: grid-gap (10.1)
注釈 1件
対応条件
  • 以前は別名で対応していました: grid-gap (57)
注釈 1件
対応条件
  • 以前は別名で対応していました: grid-gap (10.3)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (79)
対応条件
  • 以前は別名で対応していました: -ms-grid-columns (12)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (70)
実装メモ
  • 複数のトラック サイズ値は受け入れられません。 バグ 1339672 を参照してください。
注釈 2件
削除済み
  • このバージョンで機能が削除されました (79)
対応条件
  • 以前は別名で対応していました: -ms-grid-rows (12)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (70)
実装メモ
  • 複数のトラック サイズ値は受け入れられません。 バグ 1339672 を参照してください。
注釈 2件
削除済み
  • このバージョンで機能が削除されました (79)
対応条件
  • 以前は別名で対応していました: -ms-grid-columns (12)
注釈 5件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (76)
  • このバージョンで機能が削除されました (57)
実装メモ
  • `repeat(auto-fill, ...)` と `repeat(auto-fit, ...)` は 1 つの繰り返し列のみをサポートします (バグ 1341507 を参照)。
  • `calc()` は `repeat()` では機能しません (バグ 1350069 を参照)。
注釈 2件
削除済み
  • このバージョンで機能が削除されました (79)
対応条件
  • 以前は別名で対応していました: -ms-grid-rows (12)
注釈 5件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (76)
  • このバージョンで機能が削除されました (57)
実装メモ
  • `repeat(auto-fill, ...)` と `repeat(auto-fit, ...)` は 1 つの繰り返し列のみをサポートします (バグ 1341507 を参照)。
  • `calc()` は `repeat()` では機能しません (バグ 1350069 を参照)。
注釈 1件
実装メモ
  • バージョン 60 以降では、「align-content」と「justify-content」の両方に有効な値を 1 つだけ指定できます。
注釈 1件
対応条件
  • 以前は別名で対応していました: grid-row-gap (57)
注釈 1件
対応条件
  • 以前は別名で対応していました: grid-row-gap (16)
注釈 1件
対応条件
  • 以前は別名で対応していました: grid-row-gap (52)
注釈 1件
対応条件
  • 以前は別名で対応していました: grid-row-gap (10.1)
注釈 1件
対応条件
  • 以前は別名で対応していました: grid-row-gap (57)
注釈 1件
対応条件
  • 以前は別名で対応していました: grid-row-gap (10.3)

基本構文

CSS 
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-template-rows: auto;
  gap: 1.5rem;
}

.header {
  grid-column: 1 / -1;
}

ライブデモ

auto-fit Responsivecard

columnnumber autoadjustactual grid. with Minmax and repeat.

プレビュー全画面表示

grid-template-areas pe-j

header, sidebar, main, footer visual to set onlynumberexample.

プレビュー全画面表示

columnspan usinghilightplacement

heavymaincardonlywideshow, dashibo-d in usespanspecified.

プレビュー全画面表示

実務での使いどころ

  • ページレイアウト

    ヘッダー・サイドバー・メインコンテンツ・フッターを grid-template-areas で直感的に配置。レスポンシブ対応も容易。

  • 画像ギャラリー

    auto-fill と minmax() で、画面幅に応じて列数が自動調整されるレスポンシブなギャラリーレイアウト。

注意点

  • grid-template-areas は視覚的にわかりやすいが、大規模なグリッドでは冗長になりがちなので適材適所で使い分ける。
  • IE 11 は古い仕様（-ms- プレフィックス）のみ対応。IE サポートが不要であれば気にする必要はない。

アクセシビリティ

  • Grid の order や配置でビジュアルの順序を変更しても DOM 順序は変わらない。スクリーンリーダーやキーボードナビゲーションの順序と視覚的な配置が大きく乖離しないよう設計する。

参考リンク