共计 1577 个字符，预计需要花费 4 分钟才能阅读完成。
download：极客 - 产品经理训练营【13 章完结】
网格布局
页面基本元素：
样式：
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.box {
border: 2px solid #FDC180;
}
通过在元素上申明 display：grid 或 display：inline-grid 来创建一个网格容器：
.wrapper {
display: grid;
}
如下成果：
定义网格中的行和列
通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。这些属性定义了网格的轨道。网格轨道是网格中任意两条线之间的空间。
如下网格，蕴含了三个 200 像素宽的列轨道：
.wrapper {
display: grid;
grid-template-columns: 200px 200px 200px;
}
fr 单位
新的 fr 单位代表网格容器中可用空间的一等份。下一个网格定义将创建三个相等宽度的轨道，这些轨道会随着可用空间增长和膨胀。
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
也可能和像素单位混用：
.wrapper {
display: grid;
grid-template-columns: 500px 1fr 2fr;
}
在轨道清单中使用 repeat()
repeat 的语法如下：
repeat(number of columns/rows, the column width we want);
有着多轨道的大型网格可使用 repeat() 标记来重复部分或整个轨道列表。如下方的网格定义：
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
可能写成：
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Repeat 语句可能用于重复轨道列表中的一部分。在上面的例子中我创建了一个网格：它起始轨道为 20 像素，接着重复了 6 个 1fr 的轨道，最初再增加了一个 20 像素的轨道。
.wrapper {
display: grid;
grid-template-columns: 20px repeat(6, 1fr) 20px;
}
Repeat 语句可能传入一个轨道列表，因此你可能用它来创建一个多轨道模式的重复轨道列表。在下一个例子中，网格将有共计 10 个轨道，为 1 个 1fr 轨道前面跟着 1 个 2fr 轨道，该模式重复 5 次。
.wrapper {
display: grid;
grid-template-columns: repeat(5, 1fr 2fr);
}
grid-auto-rows 和 grid-auto-columns
创建上文中网格例子的时候，咱们用 grid-template-columns 属性定义了自己的列轨道，然而却让网格按所需的内容创建行，这些行会被创建在隐式网格中。显式网格蕴含了你在 grid-template-columns 和 grid-template-rows 属性中定义的行和列。如果你在网格定义之外又放了一些货色，或者因为内容的数量而需要的更多网格轨道的时候，网格将会在隐式网格中创建行和列。按照默认，这些轨道将主动定义尺寸，所以会根据它外面的内容改变尺寸。
可能在隐式网格中用 grid-auto-rows 和 grid-auto-columns 属性来定义一个设置大小尺寸的轨道。
在上面的例子中咱们用 grid-auto-rows 属性来确保在隐式网格中创建的轨道是 200 像素高。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
}
