grid-template-areas
grid-template-areas
CSS プロパティは、名前付きの グリッド領域 を指定します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
これらの領域は特定のグリッドアイテムに関連付けられていませんが、グリッド配置プロパティである grid-row-start
(en-US), grid-row-end
(en-US), grid-column-start
, grid-column-end
(en-US) およびそれらの短縮プロパティ grid-row
, grid-column
, grid-area
(en-US) から参照できます。
構文
/* キーワード値 */
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;
BCD tables only load in the browser
none
- グリッドコンテナーは名前付きのグリッド領域を定義しません。
<string>
+- リストのすべての文字列ごとに行が生成され、文字列内の各セルごとに列が生成されます。行内および列間の複数の名前付きセルトークンは、対応するグリッドセルにまたがる単一の名前付きグリッド領域を生成します。これらのセルが四角形を形成しない限り、宣言は無効です。
- 関連する CSS プロパティ:
grid-template-rows
(en-US),grid-template-columns
,grid-template
- グリッドレイアウトガイド: Grid template areas (en-US)
- 動画チュートリアル: Grid Template Areas
none | <string>+
<section id="page">
<header>Header</header>
<nav>Navigation</nav>
<main>Main area</main>
<footer>Footer</footer>
</section>
#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 |
---|---|
適用対象 | グリッドコンテナー |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。