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

CSS Grid Layout

Flexbox が一次元（行 or 列）のレイアウトに特化しているのに対し、CSS Grid は行と列の両方を同時に定義・制御できる二次元レイアウトシステムである。ページ全体のレイアウトや複雑なカードグリッドなど、従来は複雑な CSS や JavaScript が必要だった配置を宣言的に実現できる。

レイアウトグリッド

概要

Flexbox が一次元（行 or 列）のレイアウトに特化しているのに対し、CSS Grid は行と列の両方を同時に定義・制御できる二次元レイアウトシステムである。ページ全体のレイアウトや複雑なカードグリッドなど、従来は複雑な CSS や JavaScript が必要だった配置を宣言的に実現できる。

対応ブラウザ

デスクトップ

Chrome 57+
Edge 16+
Safari 10.1+
Firefox 52+

モバイル

Chrome Android 57+
Safari iOS 10.3+
Firefox Android 52+

基本構文

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;
}

実務での使いどころ

  • ページレイアウト

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

  • 画像ギャラリー

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

注意点

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

アクセシビリティ

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

参考リンク