グリッドラッパー

このパターンは、中央のラッパー内でグリッドのコンテンツを整列させるのに便利ですが、必要に応じて項目を脱出させて親要素やページの端に整列させることもできます。

要件

グリッド上に配置された項目は、水平方向の中央に配置された最大幅のラッパーやグリッドの外側の端に揃えることができます。

レシピ

行った選択

このレシピでは、CSS グリッドの minmax 関数を使用して、grid-template-columns プロパティでグリッドトラックのサイズを定義しています。 最大幅を持つ中央の(グリッドレイアウトに使う6つの)列には、0 以上の最小値と、列トラックが大きくなれる最大サイズを指定する最大値を設定できます。 数値の単位(ピクセル、em、rem)を使用すると、中央のラッパーの固定最大サイズが作成されますが、パーセント値またはビューポート単位を使用すると、このラッパーはそのコンテキストに応じて拡大または縮小します。

外側の2つの列の最大サイズは 1fr です。 つまり、グリッドコンテナ内の残りの使用可能スペースを埋めるようにそれぞれが拡大されます。

便利な代替方法

このレシピをページレベルで使用するときは、コンテンツを水平方向に中央揃えするために、次のように左右の automargin とともに max-width を設定すると便利です。

.grid {
  max-width: 1200px;
  margin: 0 auto; // コンテナを水平方向に中央揃え
}

/* ブラウザーがグリッドをサポートしている場合は、max-width と margin を取り除く */
@supports (display: grid) {
  .grid {
    display: grid;
    /* 他のグリッドのコードはここへ */
    max-width: none;
    margin: 0;
  }
}

full-width 項目をビューポートの端まで「脱出」させるには、次のトリックを使用できます(Una Kravets の好意による)。

.item {
  width: 100vw;
  margin-left: 50%;
  transform: translate3d(-50%, 0, 0);
}

これは、正確なグリッド上で項目を簡単に整列させることができるという利点が必要ない場合に限り、レイアウトの適切な近似値を提供します。

アクセシビリティへの懸念

グリッドを使用すると(理由の範囲内で)項目を適切な場所に配置できますが、CSS グリッドを使用して項目を配置する場合は、基になるマークアップが論理的な順序に従うことが重要です(詳細については、CSS グリッドのレイアウトとアクセシビリティを参照)。

ブラウザー実装状況

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

 

grid-template-columns

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
grid-template-columnsChrome 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 16Firefox 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 44
完全対応 44
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43
完全対応 43
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0
Animation of tracksChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 66IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 66Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
fit-content()Chrome 完全対応 29Edge 完全対応 16Firefox 完全対応 51IE 未対応 なしOpera 完全対応 44Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57Firefox Android 完全対応 51Opera Android 完全対応 43Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 7.0
minmax()Chrome 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 16Firefox 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 44
完全対応 44
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43
完全対応 43
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS 完全対応 10.3Samsung Internet Android ?
repeat()Chrome 完全対応 57
完全対応 57
完全対応 38
無効
無効 From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 16Firefox 部分対応 57
補足
部分対応 57
補足
補足 repeat(auto-fill, ...) and repeat(auto-fit, ...) only support one repeated column (see bug 1341507).
未対応 52 — 57
補足
補足 calc() doesn't work in repeat() (see bug 1350069).
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 44
完全対応 44
完全対応 あり
無効
無効 This feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57
完全対応 57
完全対応 38
無効
無効 From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43
完全対応 43
完全対応 あり
無効
無効 This feature is behind the Enable experimental Web Platform features preference.
Safari iOS 完全対応 10.3Samsung Internet Android ?

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報