网格布局(Grid)将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局
一、Grid布局与Flex布局的区别
- Flex布局是轴线布局，只能指定“项目”针对轴线的位置，可以看作是一维布局
- Grid布局是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局
二、容器属性
1. display: grid
指定一个容器采用网格布局
2. display: inline-grid
将容器元素设置成行内元素
3. grid-template-columns 和 grid-template-rows
grid-template-columns
定义每一列的宽度
grid-template-rows
定义每一行的高度
(3.1) repeat(重复的次数，所要重复的值)
.container {
display: grid;
grid-template-columns: repeat(3, 20%);
grid-template-rows: repeat(3, 20%);
}
(3.2) auto-fill关键字
当单元格的大小是固定的，容器的大小不确定，实现每一行或每一列容纳尽可能多的单元格时，使用auto-fill实现自动填充
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-template-rows: repeat(auto-fill, 100px);
}
(3.3) fr关键字
表示比例关系，fraction的缩写
.container {
display: grid;
grid-template-columns: 1fr 2fr 150px;
}
表示第二列的宽度是第一列的2倍，第三列宽度是150px
(3.4) minmax(最小值，最大值)
将长度设置在一个范围内
.container {
display: grid;
grid-template-colunms: 150px 20% (100px,1fr);
}
表示第三列的列宽不小于100px，不大于1fr
(3.5) auto关键字
表示由浏览器自己决定长度
4. row-gap 和 column-gap 和 gap
- row-gap设置行与行的间隔
- column-gap设置列与列的间隔
- gap 是row-gap和column-gap的缩写
.container {
gap: 20px 30px;
}
设置行间距为20px，列间距为30px
5. grid-template-areas
用于定义区域
.container {
display: grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px 50px;
grid-template-areas: 'header header header'
'slidbar main .'
'footer footer footer';
}
划分成9个单元格，顶部是header区域，中间分为slidebar和main(.表示这个区域不需要利用)，底部是footer区域
6. grid-auto-flow
设置容器子元素的排列顺序
默认值是row(先行后列)
row dense(先行后列，尽量不出现空格)
column(先列后行)
column dense(先列后行，尽量不出现空格)
.container {
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-columns: repeat(3,100px);
grid-auto-flow: column
}
7. justify-items属性，align-items属性，place-items属性
(7.1) justify-items
设置单元格内容的水平位置(左中右)
属性值：
- start：对齐单元格的起始边缘
- end：对齐单元格的结束边缘
- center：单元格内部居中
- stretch：拉伸，占满单元格的整个宽度(默认)
.container {
display: grid;
grid-template-columns: repeat(3,165px);
grid-template-rows: repeat(3,165px);
grid-auto-flow: row;
border: 1px solid black;
justify-items: start;
}
效果图
justify-items.png
(7.2) align-items
设置单元格内容的垂直位置(上中下)
属性值：
- start：对齐单元格的起始边缘
- end：对齐单元格的结束边缘
- center：单元格内部居中
- stretch：拉伸，占满单元格的整个宽度(默认)
.container {
display: grid;
grid-template-columns: repeat(3,165px);
grid-template-rows: repeat(3,165px);
grid-auto-flow: row;
border: 1px solid black;
align-items: start;
}
效果图
align-items.png
(7.3) place-items
是align-items和justify-items的缩写
place-items: <align-items> <justify-items>
8. justify-content属性，align-content属性，place-content属性
属性值：
- start：对齐容器的起始边框
- end：对齐容器的结束边缘
- center：容器内部居中
- stretch：项目大小没有指定时，拉伸占据整个网格容器
- space-around：每个项目两侧的间隔相等(项目之间的间隔比项目与容器边框的间隔大一倍)
- space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔
- space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
place-content属性是align-content属性和justify-content属性的合并简写形式
place-content: <align-content> <justify-content>
.container {
height: 500px;
display: grid;
grid-template-columns: repeat(3,105px);
grid-template-rows: repeat(3,105px);
grid-auto-flow: row;
border: 1px solid black;
place-content: space-evenly center;
}
效果图：
space-content.png
9. grid-auto-columns属性，grid-auto-rows属性
用来设置浏览器自动创建的多余网格的列宽和行高
10. grid-template属性，grid属性
- grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式
- grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式
三、项目属性
1. grid-column-start属性，grid-column-end属性，grid-row-start属性，grid-row-end属性
用来指定项目的四个边框，分别定位在哪根网格线
- grid-column-start：左边框所在的垂直网格线
- grid-column-end：右边框所在的垂直网格线
- grid-row-start：上边框所在的水平网格线
- grid-row-end：下边框所在的水平网格线
2.grid-column属性，grid-row属性
- grid-column属性是grid-column-start和grid-column-end的合并简写形式
- grid-row属性是grid-row-start属性和grid-row-end的合并简写形式
.item {
grid-column: 3/5;
grid-row: 1/3;
}
3.grid-area
指定项目放在哪一个区域
.container {
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px);
border: 1px solid black;
grid-template-areas: 'a b c'
'd e f'
'g h i'
}
.item-1 {
grid-area: e;
}
将1单元格放到e区域
效果图：
grid-area.png
- grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置
.item {
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
4.justify-selft属性，align-self属性，place-self属性
- justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目
- align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目
- place-self属性是align-self属性和justify-self属性的合并简写形式
place-self: <align-self> <justify-self>
属性值：
- start：对齐单元格的起始边缘
- end：对齐单元格的结束边缘
- center：单元格内部居中
- stretch：拉伸，占满单元格的整个宽度（默认值）
