在网页设计中，布局是一个非常重要的部分。CSS Grid 布局是近年来出现的一种布局方式，它提供了一种全新的 web 页面布局方法，能够有效地实现多列等分、自适应或固定列大小、按行缩放等布局效果。
在 CSS Grid 布局中，使用 grid-template-columns 和 grid-template-rows 属性，可以方便地设定行和列的规则，从而实现灵活的布局效果。
grid-template-columns 属性
grid-template-columns 属性用于设定网格容器的列规则，指定每一列的宽度和数量。其中，宽度可以是长度值、百分比、fr 等，数量可以是固定的数字或自动填充。
例如，下面的代码使用 grid-template-columns 属性将父容器分为三个等宽的列：
---------- - -------- ----- ---------------------- --- --- ---- -
这里 1fr 表示一份比例，一共三份，所以每一列宽度都是父容器宽度的三分之一。
也可以使用像素长度，如下所示：
---------- - -------- ----- ---------------------- ----- ----- ------ -
这样就会将父容器分为三列，每一列都是 100 像素宽。
还可以使用百分比来设置列宽，例如：
---------- - -------- ----- ---------------------- --- --- ---- -
这样就会将父容器分为三列，宽度分别占据 30%、50%、20%。
grid-template-rows 属性
与 grid-template-columns 属性类似，使用 grid-template-rows 属性可以方便地设定网格容器的行规则，指定每一行的高度和数量。其中，高度可以是长度值、百分比、fr 等，数量可以是固定的数字或自动填充。
例如，下面的代码使用 grid-template-rows 属性将父容器分为两个等高的行：
---------- - -------- ----- ------------------- --- ---- -
这里 1fr 表示一份比例，一共两份，所以每一行高度都是父容器高度的一半。
也可以使用像素长度，如下所示：
---------- - -------- ----- ------------------- ----- ------ -
这样就会将父容器分为两行，每一行都是 100 像素高。
还可以使用百分比来设置行高，例如：
---------- - -------- ----- ------------------- --- ---- -
这样就会将父容器分为两行，高度分别占据 30%、70%。
同时设定行和列规则
在实际布局中，通常需要同时设定列和行规则。可以在 grid-template-columns 和 grid-template-rows 中使用空格隔开，设定每一列和每一行的宽度和高度规则。
例如，下面的代码使用 grid-template-columns 和 grid-template-rows 同时设定了父容器的行和列规则：
---------- - -------- ----- ---------------------- --- --- ---- ------------------- ----- ------ -
这里将父容器分为 2 行 3 列，左右两列宽度相等，中间一列宽度是左右两列的二倍；第一行高度为 100 像素，第二行高度为 200 像素。
自动填充的网格行和网格列
除了固定数量的行和列，还可以使用自动填充的网格行和网格列。
例如，下面的代码使用 grid-template-columns 和 grid-template-rows 自动填充网格行和网格列：
---------- - -------- ----- ---------------------- ---------------- ------------- ------ ------------------- ------ -
这里使用 repeat 函数，自动填充若干列，每一列的最小宽度是 100 像素，最大值为 1fr；行高是 100 像素。
这样就可以实现自适应的布局效果，当容器大小变化时，网格容器自动填充网格列，保持三列等分的布局效果。
总结
本文介绍了 CSS Grid 布局中 grid-template-columns 和 grid-template-rows 属性的基本用法，包括设定列宽、行高、数量规则、自动填充网格行和网格列等，并给出了实例代码。
在实际项目中，可以根据需要灵活运用这些属性，实现多样化的布局效果，提升网页的可视化效果和用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66473816d3423812e4583595