grid-template-columns和grid-template-rows
这两个属性定义了网格每行每列的大小。本例使用了一种新单位fr,代表每一列(或每一行)的分数单位(fraction unit)。这个单位跟Flexbox
中flex-grow因子的表现一样。grid-template-columns:1fr 1fr 1fr
表示三列等宽。
不一定非得用分数单位,可以使用其他的单位,比如px、em或百分数。也可以混搭这几种单位,例如,grid-template-columns: 300px 1fr定义了一个固定宽度为300px的列,后面跟着一个会填满剩余可用空间的列。2fr的列宽是1fr的两倍。
grid-gap: 1em 2em;
表示水平方向间距为2em,垂直方向为1em。
更多示例
css
nav {
/*从1号垂直网格线跨越到3号垂直网格线*/
grid-column: 1 / 3;
/*
该网格项将跨越一个网格行。span 表示所要跨越的网格数量。
*/
grid-row: span 1;
}
.main {
grid-column: 1 / 2;
/* 元素起始于第3条水平网格线,结束于第5条水平网格线*/
grid-row: 3 / 5;
}
nav {
/*从1号垂直网格线跨越到3号垂直网格线*/
grid-column: 1 / 3;
/*
该网格项将跨越一个网格行。span 表示所要跨越的网格数量。
*/
grid-row: span 1;
}
.main {
grid-column: 1 / 2;
/* 元素起始于第3条水平网格线,结束于第5条水平网格线*/
grid-row: 3 / 5;
}
在线代码示例:
https://jsfiddle.net/chuangchen/gnjb7wpq/325/
flex布局和grid布局的差异
- Flexbox本质上是一维的,而网格是二维的。
- Flexbox是以内容为切入点由内向外工作的,而网格是以布局为切入点从外向内工作的。
%% ## 有命名的网格线
https://weread.qq.com/web/reader/7d53223071e219457d53617kc0c320a0232c0c7c76d365a?
%%