grid-template属性
时间: 2023-10-06 09:10:22 浏览: 48
grid-template属性用于定义一个网格容器的行和列的数量、大小和形状。
语法:
```
grid-template: none | <grid-template-rows> / <grid-template-columns> | <grid-template-areas> | <grid-auto-rows> / <grid-auto-columns> | <grid-auto-flow>;
```
属性值:
- none:表示没有行或列的定义,也没有任何单元格。
- <grid-template-rows>:定义网格容器的行大小和行数,可以使用长度值、百分比和fr单位。
- <grid-template-columns>:定义网格容器的列大小和列数,可以使用长度值、百分比和fr单位。
- <grid-template-areas>:定义网格容器中的区域,可以使用字符串和句号表示单元格。
- <grid-auto-rows>:定义自动创建的网格行的大小。
- <grid-auto-columns>:定义自动创建的网格列的大小。
- <grid-auto-flow>:定义自动布局算法。可以是row(将单元格从左到右、从上到下排列)、column(将单元格从上到下、从左到右排列)或dense(更紧密地填充网格)。
示例:
```
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3列相等宽度 */
grid-template-rows: 100px 200px; /* 2行,第一行高100px,第二行高200px */
grid-template-areas:
"header header header"
"main sidebar sidebar"
"footer footer footer"; /* 定义区域 */
}
```
上述示例定义了一个包含3列和2行的网格容器,其中第一行高100px,第二行高200px,每列宽度相等。网格容器中定义了3个区域:header、main和sidebar,以及一个名为footer的区域,它们组成一个3×3的网格。