一、网格
网格类似于html的表格，主要用于复杂的单元格场景，由网格线与网格构成，其中网格中一般有容器与项目两个称呼，容器指网格的父元素，项目指网格的子元素
注：网格与网格线需在控制台才能看到
二、触发网格：
1、块状网格：display:grid;2、行内块网格：inline-grid
三、划分行列
划分行数：grid-template-rows:属性值划分列数：grid-template-columns:属性值上述两种属性后属性值写几个就有几行或几列，可写纯数值100px或百分比10%等或运用repeat（）函数，repeat（）函数：用于解决重复取值问题，repeat（重复次数，宽度/高度）注：宽高也可设置auto，fr;auto既占据剩余所有宽，repeat(4,auto);fr为平均分配划分行列数也可将重复次数设置为auto-fill，既自动划分行列数repeat(auto-fill,100px)最小最大函数：minmax（）最小不能小于1，最大不能大于2
四、调整单元格间距
单一属性：行间距属性row-gap；列间距属性：column-gap复合属性：gap:第一个值代表行间距，第二个值代表列间距
五、调整显示顺序
默认：横向排列，第一行排列完排列第二行调整：grid-auto-flow:row（横向排列）；column（纵向排列）
六、合并单元格
合并单元格前需要对每一个单元格进行命名，想要合并的单元格必须用同一个名字，并且只能出现横向或纵向命名一致，不能出现其他形状例：
<style>.box{width:600px;height:600px;border:10px solid gray;margin:100px auto;display:grid;grid-template-rows:repeat(6,200px);/*设置行列*/grid-template-columns:repeat(6,200px);grid-template-areas:"a b c"/*命名网格*/"a b c""a b c":}.box-a{grid-area:a;}.box-b{grid-area:b;}.box-c{grid-area:c;}</style><body><div class="box"><div class="box-a">a</div><div class="box-b">b</div><div class="box-c">c</div></div></body>
效果图：
七、单元格内容对齐
单元格内对齐方式主要是每一个网格中的项目的对齐方式，使用属性为：place-itemsstart：开始位置；end：结束位置；center：居中位置；stretch：拉伸place-items：参数1 参数2 参数1：垂直方向；参数2：水平方向
八、网格的对齐方式
网格的对齐方式代表的是整个网格位于容器内的对齐方式；使用属性：place-contentstart：开始位置；end：结束位置；center：居中位置；stretch：拉伸space-evenly： 均匀排列每个元素,每个元素之间的间隔相等。
**space-between**：
在左右两侧没有边距。
space-around： 在左右两侧会留下边距，垂直布局同理。
九、项目上的属性
1、项目属性：合并单元格单一属性grid-row-start:数值 网格线的开始(横向)grid-row-end:数值 网格线的结束(横向)grid-column-start:数值 网格线的开始(纵向)grid-column-end:数值 网格线的结束(纵向)两个复合属性grid-row:num1/num2grid-column:num1/num2
本文转载自: https://blog.csdn.net/qq_64085550/article/details/140813374
版权归原作者 The devil 所有， 如有侵权，请联系我们删除。
版权归原作者 The devil 所有， 如有侵权，请联系我们删除。