grid-template-areas
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.
grid-template-areas
は CSS のプロパティで、グリッド内でセルを確立し、名前を割り当てることにより、名前付きの グリッド領域 を指定します。
試してみましょう
これらの領域は、特定のグリッドアイテムに関連付けられていませんが、グリッド配置プロパティである grid-row-start
, grid-row-end
, grid-column-start
, grid-column-end
およびそれらの一括指定プロパティ grid-row
, grid-column
, grid-area
で参照することができます。
構文
css
/* キーワード値 */
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: revert;
grid-template-areas: revert-layer;
grid-template-areas: unset;
値
公式定義
初期値 | none |
---|---|
適用対象 | グリッドコンテナー |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
例
名前付きグリッド領域の指定
HTML
html
<div id="page">
<header>ヘッダー</header>
<nav>ナビゲーション</nav>
<main>メイン領域</main>
<footer>フッター</footer>
</div>
CSS
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;
}
結果
仕様書
Specification |
---|
CSS Grid Layout Module Level 2 # grid-template-areas-property |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 関連する CSS プロパティ:
grid-template-rows
,grid-template-columns
,grid-template
- グリッドレイアウトガイド: グリッドテンプレート領域
- 動画チュートリアル: Grid Template Areas