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 October 2017.
試してみましょう
構成要素のプロパティ
このプロパティは以下の 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: [line-name] 100px / [column-name1] 30% [column-name2] 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> ]?
<grid-template-rows> =
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-list>?
<grid-template-columns> =
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-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-list> =
[ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> =
[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<line-name-list> =
[ <line-names> | <name-repeat> ]+
<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>
<track-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> =
<fixed-breadth> |
minmax( <fixed-breadth> , <track-breadth> ) |
minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> =
repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<name-repeat> =
repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )
<fixed-breadth> =
<length-percentage [0,∞]>
例
グリッドテンプレートの定義
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
<div id="page">
<header>ヘッダー</header>
<nav>ナビゲーション</nav>
<main>メイン領域</main>
<footer>フッター</footer>
</div>
結果
仕様書
Specification |
---|
CSS Grid Layout Module Level 2 # explicit-grid-shorthand |
ブラウザーの互換性
BCD tables only load in the browser