概念：容器（container） 和 项目 （item）
- 容器：包裹其余盒子的大盒子叫容器
- 项目：容器内的每一个子盒子都是项目
指定容器的 display 为 grid 即为为容器开启网格布局
容器分两种属性
- 容器属性：定义在容器上，称为容器属性
- 项目属性：定义在项目上，称为项目属性
容器属性（container）
第一部分
- grid-template-columns：用来指定行的宽度
- grid-template-rows：用来指定行的高度
解析：这两个属性分别指定了多少值则分别在行或列上就显示多少个项目
.container{
width:450px;
background: red;
text-align:center;
display: grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px 150px;
}
技巧：
- 上述单位可用百分比%
- 重复写同样的值非常麻烦，尤其网格很多时。可以使用repeat()函数，简化重复的值。
- 为了方便表示比例关系，网格提供了fr关键字（fraction的缩写，意为“片段”），如果两列的宽度分别为1fr和2fr，就表示后者是前者的2倍
.container{
grid-template-columns: repeat(3, 33.33%);
grid-template-columns: repeat(2, 100px 20px 80px);
grid-template-columns: 1fr 2fr 1fr;
grid-template-columns: 150px 1fr 2fr;
}
第二部分
- grid-row-gap：设置行与行之间的间隔
- grid-colunm-gap：设置列于列之间的间隔
- grid-gap：grid-row-gap 和 grid-colunms-gap 的合并简写
.container {
grid-row-gap: 10px;
grid-column-gap: 10px;
grid-gap: 10px 10px;
}
第三部分
- align-items 设置单元格内容的垂直位置
- justify-items 属性设置单元格内容的水平位置
- place-item 是两者的合并写法：place-items: <align-items> <justify-items>
这两个属性的取值是一样的
- start：对齐单元格的起始边缘。
- end：对齐单元格的结束边缘。
- center：单元格内部居中。
- stretch：拉伸，占满单元格的整个宽度（默认值）
.container {
align-items: start | end | center | stretch;
justify-items: start | end | center | stretch;
place-items: start end;
}
第四部分
- align-content 属性是整个内容区域在容器里面的垂直位置
- justify-content 属性是整个内容区域在容器里面的水平位置
- place-content 是两者的合并写法：place-content: <align-content> <justify-content>
这两个属性的取值是一样的
- start：对齐单元格的起始边缘。
- end：对齐单元格的结束边缘。
- center：单元格内部居中。
- stretch：拉伸，占满单元格的整个宽度（默认值）
.container {
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
place-content: start end;
}
项目属性（item）
- grid-column-start属性：左边框所在的垂直网格线
- grid-column-end属性：右边框所在的垂直网格线
- grid -column 属性是 grid-column-start 和 grid-column-end 的合并写法
- grid-row-start属性：上边框所在的水平网格线
- grid-row-end属性：下边框所在的水平网格线
- grid-row 是 grid-row-start 和 grid-row-end 的合并写法
