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

これらの領域は特定のグリッド項目に関連付けられてはいませんが、グリッド配置プロパティである grid-row-start, grid-row-end, grid-column-start, grid-column-end, and their shorthands 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
継承不可
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

57

291

16

52

402

なし

44

283

10.1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応57

57

291

16

52

402

4410.36.0

1. From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

2. From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. From version 28: this feature is behind the Enable experimental Web Platform features preference.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,