CSS grid-template 属性
实例
制作一个三列网格布局,其中第一行高 150 像素:
.grid-container
{
display:
grid
;
grid-template:
150
px
/
auto
auto
auto
;
}
尝试一下 »
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
属性 | |||||
---|---|---|---|---|---|
grid-template | 57 | 16 | 52 | 10 | 44 |
属性定义及使用说明
grid-template 属性用于网格布局,设置网格中行、列与分区。
grid-template 是以下属性的简写形式:
默认值: | auto |
---|---|
继承: | no |
动画: | 支持。 阅读关于 animatable 尝试一下 |
版本: | CSS 网格布局模块 Level 1 |
JavaScript 语法: | object.style.gridTemplate="250px / auto auto" 尝试一下 |
语法
grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
值 | 描述 |
---|---|
none | 默认值,不指定行与列的大小。 |
grid-template rows / grid-template-columns | 指定行与列的大小。 |
grid-template-areas | 使用网格元素的名称来布局网格。 |
initial | 将此属性设置为默认值。 阅读关于 initial |
inherit | 从父元素继承该属性。 阅读关于 inherit |
更多实例
实例
设置两行,其中 "item1" 跨越前两行中的前两列:
.item1
{
grid-area:
myArea
;
}
.grid-container
{
display:
grid
;
grid-template:
'
myArea
myArea
. . .'
'
myArea
myArea
. . .'
;
}
尝试一下 »
命名所有网格元素,并制作一个网页模板:
实例
.item1
{
grid-area:
header
;
}
.item2
{
grid-area:
menu
;
}
.item3
{
grid-area:
main
;
}
.item4
{
grid-area:
right
;
}
.item5
{
grid-area:
footer
;
}
.grid-container
{
display:
grid
;
grid-template:
'
header
header
header
header
header
header
'
'
menu
main
main
main
right
right
'
'
menu
footer
footer
footer
footer
footer
'
;
}
尝试一下 »
相关文章
CSS 教程: CSS 网格布局
CSS 参考手册: grid-area 属性
CSS 参考手册: grid-template-rows 属性
CSS 参考手册: grid-template-columns 属性
CSS 参考手册: grid-template-areas 属性