CSS：网格布局（grid）

时间：2023-03-30 18:37:40 CSS

gridcontainer通过将属性display的值设置为grid，HTML元素就变成了一个网格容器，容器可以使用CSS网格（CSSGrid）相关的属性。例如：网格1

网格2

网格3

grid属性1.grid-template-columns属性值的个数代表网格中的列数，每个值代表对应列的宽度。例如：在上面的代码中，该属性在网格容器中将元素布局成一个三列的网格，每列对应的宽度为100px。2、grid-template-rows属性值的个数表示网格的行数，每个值表示对应列的高度。例如：网格1网格2网格3Grid4Grid5上面代码中，在grid容器中，该属性会将5个grid排成两行，第一行三列，第二行两列，每行对应的高度为50px，宽度为100px；3、网格单位fr：设置列或行占剩余空间的比例；auto：设置列宽或行高自动等于其内容的宽度或高度；%：将列或行的大小调整为其容器宽度或高度的百分比；网格1网格2网格3Grid4Grid5grid-template-columns:auto50px10%2fr1fr将容器中的5个网格布局为5列。第一列的宽度等于它的内容宽度；第二列的宽度为50px；第三列的宽度是网格容器的10%；最后两列，将网格容器剩余的宽度平均分成三份，两份给第四列，一份给第五列。4.grid-column-gap可以增加列间距例如：grid1netGrid2网格3网格4网格5上面代码中，设置列间距为20px5.grid-row-gap可以增加行间距。例如：网格1网格2网格3网格4网格5上面的代码中，行间距设置为10px6。grid-gap是grid-row-gap和grid-column-gap的简写，如果grid-gap的值为One，则行到-行间距和列间距将等于此值但是，如果有两个值，第一个值将是行间距值，第二个值将是列间距值。例如：网格1网格2网格3Grid4Grid5上面代码中，行间距为15px，列间距为25px7.grid-column控制网格自己定义网格宽度的起点和终点，进而控制有多少列每个网格项目占用。例如：网格1网格2网格3Grid4Grid5结合上面的网格图，上面代码中类名item5的网格从左边第一行开始，到第三行结束，占用两个List。8.grid-row控制网格本身，定义网格高度的开始和结束位置，进而控制每个网格项占用的行数。例如：网格1网格2网格3Grid4Grid5上面代码中类名item5的网格从上面第二行开始到底部第四行行尾占两行9.justify-self属性设置内容的方式网格在网格内沿行轴对齐。start：网格内容在网格左侧对齐；center：网格的内容在网格的中心对齐；end：网格内容在网格右侧对齐；stretch：默认值，填写整个网格区域的宽度；例如：网格1网格2网格3Grid4Grid511.align-self属性设置网格内容在网格内沿列轴对齐的方式。start：网格内容在网格内沿列轴顶部对齐；center：网格内容在网格内沿列轴中心对齐；end：网格内容沿列轴对齐，在网格内对齐列轴底部；stretch：默认值，填充网格区域的宽度；12.justify-items对网格容器使用该属性，设置网格中所有网格项沿行轴的对齐方式。start：网格内容在网格左侧对齐；center：网格的内容在网格的中心对齐；end：网格内容在网格右侧对齐；stretch：默认值，填满整个网格区域的高度；13.align-items在网格容器上使用这个属性来为网格设置所有网格项沿列轴的对齐方式。start：网格沿列轴顶部对齐；center：网格沿列轴的中心对齐；end：网格沿列轴底部对齐；stretch：默认值，填充网格区域的高度；14.grid-template-areas属性可以将网格中的一些网格单元格组合成一个区域（area），并为该区域指定一个自定义名称。例如：网格1网格2网格3Grid4Grid5上面的代码将顶部的三个单元格合并到一个称为页眉的区域，将底部的三个单元格合并到一个称为页脚的区域，并在中间行生成两个区域——广告和内容。15.grid-area通过添加您定义的名称将网格项放置到自定义区域中。例如：网格1网格2网格3Grid4Grid5上面的代码中，通过grid-area属性将类名为item1的grid放入页眉区域，将类名为item5的grid放入页脚区域。grid方法1.repeat方法指定一行或一列的重复次数，后面跟一个逗号和要重复的值。使用grid-template-columns和grid-template-rows定义网格结构时，需要为添加的每一行和每一列输入一个值。如果要添加100行高度相同的网格，单独放100个值是不实际的。在这种情况下，使用repeat函数有效的解决了这个问题。比如添加100行网格实例，使得每一行的高度为50px，也可以使用repeat方法重复多个值，在定义网格结构时与其他值一起使用网格1网格2网格3网格4网格5注意：1fr50px重复两次，然后是20px。2.minmax可以用来设置grid-template-columns和grid-template-rows的值。它的作用是在网格容器调整大小时限制网格项的大小。为此，您需要指定网格项允许的大小范围。例如：网格1网格2网格3Grid4Grid5上面代码中，grid-template-columns设置为添加两列，第一列宽100px，第二列最小宽度为50px，最大值为200px。3.auto-fill根据容器的大小，放入尽可能多的指定大小的行或列。它是repeat方法中的一个函数。通过结合自动填充和minmax可以实现更灵活的布局。例如：网格1网格2网格3Grid4Grid5上面代码中，列的宽度会随着容器的大小而变化，在插入一个60px宽的列??之前，当前行的所有列都会一直被拉伸4.auto-fit的效果差不多与自动填充相同。唯一不同的是，当容器的大小大于网格项的总和时，自动填充会继续在一端放置空行或空列，这会将所有网格项挤压到另一侧；而auto-fit不会将空行或空列放在一端，而是会拉伸所有网格项目以适合。注意：如果容器不能容纳同一行的所有网格项，则剩余的网格项将移动到新行。

上一篇：大厂面试编程题实践路线图

下一篇：HTML和CSS开发中常用的语义命名

CSS：网格布局（grid）相关文章