css.grid布局

1.什么是grid布局？

flex布局是轴线布局，只能指定“项目：针对轴线的位置，可以看作是一维布局，grid布局则是将容器划分成“行”和”列“，然后指定”项目所在“的单元格，可以看作是二维布局，grid布局比flex布局更加强大。

2.grid布局解析 

每个grid布局，有隐藏的网格线，用来帮助定位的

3.网格线 

4.容器属性 

1_grid-template-columns设置列

示例：grid-template-columns：100px 100px 80px 表示设置为3列宽度为100、100、80。 可以写多个表示多列

2_grid-template-rows设置行

示例：grid-template-rows：100px 100px 80px 表示设置为3行高度为100、100、80。可以写多个表示多行

3_设置行或列的函数、关键字简便语法

函数和关键字只是在设置行或列时使用的值，不是属性。各位不要弄混呦

（1）repeat（）函数

如果我们要设置三列都是100px的话之前写法： grid-template-columns: 100px 100px 100px;

使用repeat（）函数之后：grid-template-columns: repeat(3,100px);

如果设置行写法也是一样 

• 参数1：设置的列数
• 参数2：列的宽度

（2）auto-fill关键字        

        auto-fill关键字可以由容器宽度自动分配列数，当容器缩小时项目自动换行 

        grid-template-columns: repeat(auto-fill, 100px)

（3）fr关键字

        为了方便表示比例关系，网格布局提供了fr关键字

        grid-template-columns: repeat(4, 1fr); //每一列宽度平均分成4份

（4）minmax()函数

        产生一个长度范围，表示长度就在这个范围之中，

        grid-template-columns: 1fr minmax(150px, 1fr);表示第二列最小不会超过最小值150px。

• 参数1：最小值
• 参数2：最大值

（5）auto关键字

        auto，表示由浏览器自己决定长度

grid-template-columns: 100px auto 100px;表示第二列宽度为自动

（6）定义网格布局中列（column）、行（rows）网格线的名称

grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4]  定义列网格线的名称

grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4]         定义行的网格线名称

定义最大数量与当前网格的行或列的网格线有关，可以参考以上👆网格线。

设置后对容器没有影响。

配合项目的 grid-column-start
           grid-column-end:使用

4._项目之间的间距

row-gap:20px;  行间距
column-gap: 20px;  列间距
gap: 10px 15px;复合写法：行间距，列间距

5_grid-template-areas 

一个区域由单个或多个单元格组成，由你决定 (具体使用，需要在项目属性里面设置），一个字符串表示一行，一个字母表示一个项目。如果你不利用某个项目 则用点 .代替

grid-template-areas: 'a b c'

                                'd e f'        

                                'g . i';

a	b	c
d	e	f
g	.	i

6_容器中项目的方向 

grid-auto-flow :row;默认方向，水平

gird-auto-flow:column;垂直方向

dense 参数

grid-auto-flow: row dense; 见👇图

7_单元格内容的对齐方式

justify-items(水平方向)/ align-items (垂直方向)
属性值	含义
center	居中对齐
start	起始位置
end	结束位置
stetch	拉伸（默认值）
place-items: alight-items justify-items  复合写法

8_容器中整个内容区域的对齐方式

justify-content (水平方向) / align-content (垂直方向)
属性值	含义
start	开始位置
end	结束位置
center	居中
space-around	环绕对齐
space-between	两端对齐
space-evenly	平均对齐
stretch	默认值，拉伸

用于设置容器中内容的对齐方式,你也可以理解为项目中所有单元格的对齐方式。分不清可以看下

9_ 用来设置多出来的项目宽和高

比如我设置了3*3的布局，实际有10个项目。此时这个属性就有用了

grid-auto-columns / grid-auto-rows

 

5.项目属性 

1_根据网格线,指定item的具体位置.

还记得在容器写的这个吗？他是给每行、每列的网格线定义了名称

 那么为什么我们f12检查看不到呢？即便你定义了名称，浏览器他默认给你分配编号，不会显示你定义的名称。

属性	含义	值
grid-column-start	所占列的网格线开始	使用自定义的名称  或 使用浏览器网格线编号
grid-column-end	所占列的网格线结束
grid-row-start	所占行的网格线开始
grid-row-end	所占行的网格线结束

简写方式
属性	值
grid-column	span 3 跨3网格线
grid-row
grid-column	1 / 3 表示从1开始到三结束
grid-row

2_指定项目放在哪一个区域grid-area

与以上不同，grid-area是和grid-template-areas配合使用，grid-template-areas所定义的区域。可以让某个项目任意调动。

        grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并 简写形式，直接指定项目的位置 grid-area:

3_设置单个项目的对齐方式 

justify-self（水平方向）/align-self（垂直方向）
属性值	含义
start	开始位置
end	结束位置
cneter	居中
stretch	默认值，（拉伸）

place-self属性是align-self属性和justify-self属性的合并简写形式 place-self: center center;

参考资料以及图片部分来自小破站     耕耕技术宅