前面我们学习了 Flexbox 布局，这种布局通过行或者列对其子元素进行布局，属于一维布局。今天我们学习一种二维布局方式 grid 布局，也称网格布局，它属于 Flexbox 布局的增强版，往往通过 grid 来布局整个页面框架，框架内部使用 Flexbox 布局。
如果在前面你有学过 Flexbox 布局，对理解 grid 这种布局有非常大的帮助。在开始之前我们先了解一些概念。一图胜千言：
容器属性
某个元素成为 gird 容器，需要通过 display: grid 来设置布局方式为 grid。
.container {
display: grid;}grid-template-rows，grid-template-columns: 设置行、列的尺寸：
fr：是一个占比单位，占容器的比例；
repeat(n, size) : 重复多少次，大小是多大；
minmax(min, max) : 取值范围 >= min, <= max;
auto：根据浏览器决定大小；
.container {
display: grid; grid-template-columns: 1fr 1fr 1f grid-template-columns: repeat(3, 1fr); grid-template-columns: 200px 200px 200px; grid-template-columns: repeat(3, 200px);
grid-template-rows: minmax(200px, 1fr) 100px auto;}举例：
<head> <meta charset="utf-8"> 
最低0.47元/天 解锁文章
1305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
