在学习gird布局使用阮一峰的教程进行学习，并实现下里面的布局
阮一峰grid布局学习网址：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
实现案例：
html代码如下：
<div class="grid">
<div class="left">
<div class="lt" style="background-color: #b03531">1</div>
<div class="lb">
<div style="background-color: #30997b">3</div>
<div style="background-color: #da6f2b">5</div>
</div>
</div>
<div class="right">
<div style="background-color: #33a8a5">2</div>
<div style="background-color: #6a478f">4</div>
</div>
</div>
css代码：
.grid{
width: 600px;
height: 300px;
margin: 100px auto;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px 20px;
grid-template-rows: 100%;
}
.left {
display: grid;
grid-template-columns: 1fr;
grid-row-gap: 20px;
}
.lb {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 20px;
}
.right {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
grid-template-rows: 30%;
}
知识点详解
grid布局与flex布局有一定的相似性，都可以指定容器内部多个项目的位置。
flex布局是轴线布局，只能指定“项目”针对轴线的位置，可以看做一维布局
grid布局则是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作二维布局。
display: grid 定容器采用网格布局
display: inline-grid； 指定容器是一个行内元素，内部采用网格布局。
grid-template-columns： 定义每一列的宽度 （300px 300px）两列 每列宽度300px 支持百分比，rem等单位
grid-template-rows ： 定义每一行的高度 （300px 200px）第一行高度300培训 第二行高度200px 支持百分比，rem等单位
备注： 也可以通过repeat() grid-template-columns: repeat(3, 33.33%); grid-template-rows: repeat(3, 33.33%); grid-template-columns: repeat(2, 100px 20px 80px)； 接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值
fr关键词
为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍
grid-template-columns: 2fr 2fr;
grid-template-columns： 1fr minmax(minmax()); // minmax(100px, 1fr)表示列宽不小于100px，不大于1fr
grid-gap 属性
.container {
grid-row-gap: 20px; //设置行间距
grid-column-gap: 20px; // 设置列间距
grid-gap: 20px 20px; // 综合写法 跟padding,margin属性类似， 第一个表示行间距，第二个表示列间距
grid-gap: 20px;
}
justify-items属性 align-items属性
justify-items属性设置单元格内容的水平位置（左中右） align-items属性设置单元格内容的垂直位置（上中下）
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。
justify-content 属性，align-content 属性
justify-content属性是整个内容区域在容器里面的水平位置（左中右）
align-content属性是整个内容区域的垂直位置（上中下）。
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
start：对齐容器的起始边框。
end：对齐容器的结束边框。
center：容器内部居中。
stretch：项目大小没有指定时，拉伸占据整个网格容器。
项目大小没有指定时，拉伸占据整个网格容器
space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
place-content属性是align-content属性和justify-content属性的合并简写形式。
place-content: <align-content> <justify-content>
grid兼容性
