这是我参与「第四届青训营 」笔记创作活动的第九天
1. grid布局应用场景
grid布局是二维布局，即同时考虑行和列
相对于flex布局更加的适合网页布局，flex有时更适合移动端
2. grid布局语法
1. grid容器
- grid容器设置
display：grid 设置容器
- 单元格的设置
grid-template-columns 属性设置列数和宽
grid-template-rows 属性设置行数和宽
这里可以用 px 单位，也可以用 fr 将余下空间按比例划分
- 设置grid项目在单元格中的排列顺序
grid-auto-flow
有colunm和row两个属性值，分别用于改变纵向和横向排列元素
- 设置grid项目在单元格中对齐方式
justify-items设置单元水平位置
align-items设置单元垂直位置
默认的情况下，grid容器单元格内的块元素（grid项目）会适应单元格的宽度和高度，设置justify-items后，单元格内的元素会适应自身内容的宽度，设置align-items后，单元格内的元素会使用内容的高度。
有start，center，end，stretch四个属性值控制内容在单元格中位置，默认第四个延伸，即单元格铺满且内容为start位置，设置为前三个单元格会按照内容大小压缩。
将justify-items和align-items两个属性设置为center，可以将单元格内的内容垂直水平居中显示。
- 设置单元格在grid容器中对齐方式
justify-content控制内容的水平位置
aling-content控制内容的垂直位置
- 溢出单元格大小设置
grid-auto-columns
grid-auto-rows
2. grid项目
- 合并单元格
grid-column-start水平起始线
grid-colunm-end水平结束线
grid-column简化写法，start + / + end
下面是定义垂直
grid-row-start
grid-row-end
grid-row
默认两条线相邻
更改了单个grid项目所占线之后，其他项目按照原有顺序排列
- 更改单个grid项目在单元格的位置
justify-self
align-self
一个简单布局案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.container{
display: grid;
width: 800px;
margin: 0 auto;
border: 1px solid blue;
grid-template-columns: 600px 200px;
grid-template-rows: 80px 200px 200px 200px 50px;
}
.item{
border: 1px solid red;
}
.header{
grid-column: 1 / 3;
}
.aside{
grid-column:2 / 3;
grid-row: 2 / 5;
}
.footer{
grid-column:1 / 3;
}
</style>
</head>
<body>
<div class="container">
<div class="item header">logo</div>
<div class="item docs">docs</div>
<div class="item blogs">blogs</div>
<div class="item videos">videos</div>
<div class="item aside">aside</div>
<div class="item footer">footer</div>
</div>
</body>
</html>
\
