grid-template
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
試してみましょう
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
/* キーワード値 */
grid-template: none;
/* grid-template-rows / grid-template-columns の値 */
grid-template: 100px 1fr / 50px 1fr;
grid-template: auto 1fr / auto 1fr auto;
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
grid-template: fit-content(100px) / fit-content(40%);
/* grid-template-areas grid-template-rows / grid-template-column の値 */
grid-template:
"a a a"
"b b b";
grid-template:
"a a a" 20%
"b b b" auto;
grid-template:
[header-top] "a a a" [header-bottom]
[main-top] "b b b" 1fr [main-bottom]
/ auto 1fr auto;
/* グローバル値 */
grid-template: inherit;
grid-template: initial;
grid-template: revert;
grid-template: revert-layer;
grid-template: unset;
値
none-
3 個すべてのプロパティの値に
noneを設定するキーワードで、明示的なグリッドがないことを意味します。名前付きグリッド領域はありません。行と列は暗黙的に生成されます。これらのサイズはgrid-auto-rowsおよびgrid-auto-columnsプロパティによって決定されます。 <'grid-template-rows'> / <'grid-template-columns'>-
grid-template-rowsおよびgrid-template-columnsに特定の値を設定し、grid-template-areasの値にnoneを設定します。 [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?-
grid-template-areasにリストの文字列を設定し、grid-template-rowsにリストの各文字列に従ったトラックサイズを設定します (サイズ指定の足りない部分にはautoが設定されます)。さらに、各サイズの前後で定義された名前付き線をつなぎ、grid-template-columnsにトラックリストのスラッシュ記号の後で指定されたサイズを設定します (指定されていない場合はnoneが設定されます)。メモ: これらのトラックリストに
repeat()関数を使うことはできません。トラックは「ASCII アート」内の行列と一対一の関係で視覚的に並んでいるためです。
メモ: grid 一括指定プロパティは同じ構文を受け入れますが、暗黙的なグリッドプロパティをその初期値にリセットしてしまいます。これらの値が別々にカスケードされないようにするには、（grid-template ではなく） grid を使用してください。
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | グリッドコンテナー |
| 継承 | なし |
| パーセント値 | 一括指定の次の各プロパティとして
|
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | 一括指定の次の各プロパティとして
|
形式文法
grid-template =
none |
[ <'grid-template-rows'> / <'grid-template-columns'> ] |
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
<line-names> =
'[' <custom-ident>* ']'
<track-size> =
<track-breadth> |
minmax( <inflexible-breadth> , <track-breadth> ) |
fit-content( <length-percentage [0,∞]> )
<explicit-track-list> =
[ <line-names>? <track-size> ]+ <line-names>?
<track-breadth> =
<length-percentage [0,∞]> |
<flex [0,∞]> |
min-content |
max-content |
auto
<inflexible-breadth> =
<length-percentage [0,∞]> |
min-content |
max-content |
auto
<length-percentage> =
<length> |
<percentage>
例
グリッドテンプレートの定義
CSS
#page {
display: grid;
width: 100%;
height: 200px;
grid-template:
[header-left] "head head" 30px [header-right]
[main-left] "nav main" 1fr [main-right]
[footer-left] "nav foot" 30px [footer-right]
/ 120px 1fr;
}
header {
background-color: lime;
grid-area: head;
}
nav {
background-color: lightblue;
grid-area: nav;
}
main {
background-color: yellow;
grid-area: main;
}
footer {
background-color: red;
grid-area: foot;
}
HTML
<section id="page">
<header>ヘッダー</header>
<nav>ナビゲーション</nav>
<main>メイン領域</main>
<footer>フッター</footer>
</section>
結果
仕様書
| Specification |
|---|
| CSS Grid Layout Module Level 2 # explicit-grid-shorthand |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 関連する CSS プロパティ:
grid-template-rows,grid-template-columns,grid-template-areas - グリッドレイアウトガイド: 線に基づく配置を使用したグリッドレイアウト
- グリッドレイアウトガイド: グリッドテンプレート領域 - グリッド定義の一括指定
- 動画チュートリアル: Grid Template shorthand