文章目录
一、开启栅格布局（display）——父容器
栅格布局能将网页分成简单属性的行和列；Grid(网格) 模块为 display 属性提供了一个新的值：grid。当你将任何元素的 display 属性设置为 grid 时，那么这个元素就是一个 网格容器(grid container)，它的所有直接子元素就成了 网格项(grid items)。比如下面的例子中.box是网格容器，.box>div是网格项
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
二、配置行和列（grid-template-rows/grid-template-columns）——父容器
.box{
display: grid;
/* 属性值的个数就是行/列数，具体数值即为对应行高/列宽 */
grid-template-rows: 200px 200px 200px;
grid-template-columns: 200px 200px 200px;
}
这里需要介绍一个单位：fr，它是为网格布局定义的一个新单位。它可以帮助我们摆脱计算百分比，并将可用空间按比例分配。简化之前的代码（当然，这会需要确定容器的宽高，因为等分肯定要按照父元素的宽高去计算）
.box{
display: grid;
width:600px;
height:600px;
/* 属性值的个数就是行/列数，具体数值即为对应行高/列宽所占的份数 */
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
当然，如果等分的话，写法还可以更简，官方提供了repeat()函数
.box{
display: grid;
/* 第一个参数是迭代次数，第二个参数是要重复的值。 */
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}
三、配置行和列（grid-template）——父容器
该属性是grid-template-rows和grid-template-columns两条属性的简写
.box{
display: grid;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}
四、控制网格项的位置与大小（grid-row/grid-column）——子元素
在不更改HTML的前提下改变元素的位置
.box>div:nth-child(3){
/* 开始/结束 */
grid-row: 1/2;
grid-column: 2/4;
}
这样，第三个网格就会位于第一行第二三列
五、网格区域命名（grid-template-areas——父容器&&grid-area——子元素）
grid-area 属性也可以用来命名网格的某一个部分，然后我们可以用 grid-template-areas 属性来定位。
<div class="container">
<div class="header"></div>
<div class="nav"></div>
<div class="main"></div>
<div class="aside"></div>
<div class="footer"></div>
</div>
需要使用 grid-area 属性来命名每个区域，然后使用 grid-template-areas 属性来指定每个网格区域所占据的行和列，现在来实现一个圣杯布局
.container{
display: grid;
grid-template-rows: 1fr 5fr 1fr;
grid-template-columns: 2fr 5fr 3fr;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-gap: .75em;
background-color: #eee;
width: 100vw;
height: 100vh;
}
.header{
grid-area: header;
background-color: #FF6EC7;
}
.nav{
grid-area: nav;
background-color: #527f76;
}
.main{
grid-area: main;
background-color: #99CC32;
}
.aside{
grid-area: aside;
background-color: #FF7F00;
}
.footer{
grid-area: footer;
background-color: #007FFF;
}