grid-template-areas

grid-template-areas CSS プロパティは、名前付きの グリッド領域 を指定します。

この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

これらの領域は特定のグリッドアイテムに関連付けられていませんが、グリッド配置プロパティである grid-row-start, grid-row-end, grid-column-start, grid-column-end およびそれらの短縮プロパティ grid-row, grid-column, grid-area から参照できます。

構文

/* キーワード値 */
grid-template-areas: none;

/* <string> 値 */
grid-template-areas: "a b";
grid-template-areas: "a b b"
                     "a c d";

/* グローバル値 */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: unset;

値

none

グリッドコンテナーは名前付きのグリッド領域を定義しません。

<string>+

リストのすべての文字列ごとに行が生成され、文字列内の各セルごとに列が生成されます。行内および列間の複数の名前付きセルトークンは、対応するグリッドセルにまたがる単一の名前付きグリッド領域を生成します。これらのセルが四角形を形成しない限り、宣言は無効です。

正式な構文

none | <string>+

例

HTML

<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</section>

CSS

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

描画結果

仕様

仕様書	策定状況	備考
CSS Grid Layout grid-template-areas の定義	勧告候補	初期定義。

初期値	none
適用対象	grid containers
継承	なし
メディア	視覚
計算値	指定値
アニメーションの種類	個別
正規順序	形式文法で定義される一意のあいまいでない順序

ブラウザーの実装状況

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
grid-template-areas	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 完全対応 16	Firefox 完全対応 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.1	WebView Android 完全対応 57	Chrome 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.3	Samsung Internet Android 完全対応 6.0

凡例

完全対応  

完全対応

未対応  

未対応

ユーザーが明示的にこの機能を有効にしなければなりません。

ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

• 関連する CSS プロパティ: grid-template-rows, grid-template-columns, grid-template
• グリッドレイアウトガイド: Grid template areas
• 動画チュートリアル: Grid Template Areas