例：
遇到这种布局要求我们应该怎么办？
方法1：使用flex布局
<style>
* {
padding: 0;
margin: 0;
}
.gird_Box {
width: 100vw;
height: 500px;
display: flex;
}
.item1 {
background-color: pink;
flex: 1;
}
.line {
background-color: palegreen;
width: 20px;
}
.item3 {
background-color: skyblue;
flex: 1;
}
</style>
</head>
<body>
<div class="gird_Box">
<div class="item1">item1</div>
<div class="line">line</div>
<div class="item3">item3</div>
</div>
</body>
布局效果如下
方法2：使用gird布局
<style>
* {
padding: 0;
margin: 0;
}
.gird_Box {
width: 100vw;
height: 500px;
display: grid;
grid-template-columns: auto auto;
grid-gap: 20px;
}
.item1 {
background-color: skyblue;
}
.item2 {
background-color: pink;
}
</style>
</head>
<body>
<div class="gird_Box">
<div class="item1">item1</div>
<div class="item2">item2</div>
</div>
</body>
布局效果如下
显而易见，grid布局要比flex布局简单许多
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
网格布局（Grid）是最强大的 CSS 布局方案。
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局
上图布局这样的布局，拿Grid就可以轻轻松松实现
接下来，我们简单介绍一下grid网格布局以及了解grid网格布局的属性
简单介绍
grid网格布局：采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。
项目只能是容器的顶层子元素，不包含项目的子元素，Grid 布局只对项目生效
容器属性
Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。
display属性
默认情况下，容器元素都是块级元素，但也可以设成行内元素
display: grid指定一个容器采用网格布局
display: inline-grid将容器元素设置成行内元素
注意，设为网格布局以后，容器子元素（项目）的
float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
grid-template-columns 属性， grid-template-rows 属性
容器指定了网格布局以后，接着就要划分行和列。
grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。除了使用绝对单位，也可以使用百分比
上边案例使用的
auto关键字表示由浏览器自己决定长度。除auto以外，还有其他的属性值 例如
**repeat()****auto-fill 关键字****fr 关键字**等等
grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性
grid-row-gap属性设置行与行的间隔（行间距）
grid-column-gap属性设置列与列的间隔（列间距）
grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式
grid-template-areas 属性
网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。
grid-template-areas属性用于定义区域。
结尾
以上我简单列举了Grid网格布局的几个属性，想了解更多有关Grid网格布局的知识请前往Grid布局
