共计 1154 个字符，预计需要花费 3 分钟才能阅读完成。
阮一峰的网格布局（grid）教程于 3 月 25 号发布, 正好学习一波 grid 布局。虽然 grid 布局还不能够支持商用, 扩展一下知识面也是好的。
grid 布局在主流浏览器的支持情况 can i use 查看
grid 号称是史上最强大的布局方案，它将网页划分成一个个小网格，可以任意组合不同的网格, 做成各式各样的布局。
grid 布局和 flex 布局不同，flex 布局是一维布局，只能改变项目的轴线位置。grid 布局是二维布局, 将容器划分成行和列, 产生单元格, 然后指定项目所在的单元格。
容器属性
display 属性
display:grid 指定一个容器采用网格布局。
div{
display:grid
}
默认情况下容器都是块级元素, 但也可以设置成行内元素。
div{
diplay:inline-grid;
}
注意: 设置成网格布局之后，容器的 float、display:inline-block、display:inline-cell、vertical-align 和 column-* 等设置都失效。
grid-template-columns 属性和 grid-template-rows 属性
容器指定为网格布局之后, 就要设置列宽 grid-template-columns、行高 grid-template-rows
div{
display:grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:100px 100px 100px;
}
// 指定了三行三列的网格, 列宽和行高都是 100px。
除了设置 px 还可以用百分比
div{
display:grid;
grid-template-columns:33.3% 33.3% 33.3%;
grid-template-rows:33.3% 33.3% 33.3%;
}
repeat() 网格特别多的时候可以用 repeat 函数简化重复的值。
div{
display:grid;
grid-template-columns:repeat(3,33.3%);
grid-template-rows:repeat(3,33.3%);
}
repeat() 接受 2 个参数, 第一个参数是重复的次数, 第二个参数是所要重复的值。repeat() 重复某种模式也是可以的
grid-template-columns:repeat(2, 100px 20px 80px);
auto-fill 关键字
有时候单元格大小是固定的，但是容器大小是不确定的, 如果希望每一行或每一列容纳尽可能多的单元格, 这时可以用 auto-fill 关键字表示自动填充。
.container{
display:grid;
grid-template-columns:repeat(auto-fill,100px)
}
// 自动填充，每列宽 100px;
未完待续
