一、网格
网格类似于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-items
start：开始位置；end：结束位置；center：居中位置；stretch：拉伸
place-items：参数1 参数2 参数1：垂直方向；参数2：水平方向
八、网格的对齐方式
网格的对齐方式代表的是整个网格位于容器内的对齐方式；使用属性：place-content
start：开始位置；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/num2
grid-column:num1/num2
本文转载自: https://blog.csdn.net/qq_64085550/article/details/140813374
版权归原作者 The devil 所有， 如有侵权，请联系我们删除。
版权归原作者 The devil 所有， 如有侵权，请联系我们删除。