| 属性名 | grid-template |
|---|---|
| 値 |
none | [ <grid-template-rows> / <grid-template-columns> ] | [ <line-names>? <string> <track-size>? <line-names>?]+ [ / <explicit-track-list> ]? |
| 初期値 | none |
| 適用可能要素 | グリッドコンテナ |
| 継承 | 継承しない |
| サポート | https://caniuse.com/mdn-css_properties_grid-template |
grid-template-rows と grid-template-columns をまとめて指定したり、エリア名、ライン名などを定義します。詳細は「とほほのGrid入門」を参照してください。
grid-template: 2rem 2rem / 4rem 4rem 4rem;
grid-template: auto / 4rem auto 4rem;
grid-template:
"head head head"
"menu main side"
"foot foot foot";
grid-template:
"header header header" 2rem
"menu main side" 4rem
"footer footer footer" 2rem
/ 4rem 16rem 4rem;
grid-template:
[head-top] "head head head" 2rem [head-bottom]
[body-top] "menu main side" 2rem [body-bottom]
[foot-top] "foot foot foot" 2rem [foot-bottom]
/ [x1] 4rem [x2] 4rem [x3] 4rem [x4];