Grid
初了解
在学习弹性布局之前首先就要明白其概念
flex 就是flexible box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性
任何一个容器都可以指定为flex布局
.box{
display: flex;
}
行内元素当然也可以使用flex布局
.box{
display: inline-flex;
}
Webkit 内核的浏览器，必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器属性
- flex-direction
- justify-content
- align-items
- flex-wrap
- align-content
- flex-flow
flex 项目属性（item属性）
- order
- flex-grow
- flex-shrink
- flex-basis
- align-self
- flex
Grid 布局是什么？
Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。
Grid 布局和 flex 布局
讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。
Grid 布局远比 flex 布局强大！
flex布局示例:
Grid 布局示例：
fr单位：
轨道可以使用任何长度单位进行定义。
网格引入了fr单位来帮助我们创建灵活的网格轨道。一个fr单位代表网格容器中可用空间的一等份。以下实例定义了一个网格定义将创建三个相等宽度的轨道,这些轨道会随着可用空间增长和收缩。
网格单元：
一个网格单元是在一个网格元素中最小的单位，从概念上来讲其实它和表格的一个单元格很像。
网格线：
划分网格的线，称为""网格线"。应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。m列有m +1根垂直的网格线，n行有n +1跟水平网格线
<style>
main{
width: 700px;
height: 700px;
display: grid;
border: 1px solid rgb(0, 183, 255);
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px auto 50px;
}
.col-1{
background-color: aqua;
grid-column-start: 1;
grid-column-end: 6;
}
.col-2{
background-color: rgb(51, 75, 180);
grid-column-start: 1;
grid-column-end: 2;
}
.col-3{
background-color: rgb(15, 53, 53);
grid-column-start: 3;
grid-column-end: 4;
}
.col-4{
background-color: rgb(113, 17, 158);
grid-column-start: 1;
grid-column-end: 4;
}
</style><body>
<main>
<div class="col-1"></div>
<div class="col-2"></div>
<div class="col-3"></div>
<div class="col-4"></div>
</main>
</body>