grid布局优缺点,grid布局方式

在学习gird布局使用xddbl的教程进行学习，并实现下里面的布局

xddblgrid布局学习网址：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兼容性