简介
CSS 网格布局是一种强大的布局系统，可以让开发者轻松地构建网格化布局。在 CSS 网格布局中，可以使用 grid-template-rows 和 grid-template-columns 属性来定义网格的行和列及其大小。
使用 grid-template-rows 和 grid-template-columns
grid-template-rows 属性用于定义网格的行，而 grid-template-columns 属性用于定义网格的列。它们的值可以包含多个指定网格大小的关键字、长度值、百分比值、fr 单位和 repeat() 函数等。
关键字值
以下是一些常用的关键字，用于快速定义网格的行和列：
- auto：默认值。
- min-content、max-content：根据内容自动设置大小。
- fit-content：根据内容自动设置大小，并尽可能填满剩余的空间。
- minmax(min-value, max-value)：指定一个范围的最小值和最大值。
长度和百分比值
可以使用长度和百分比值来定义行和列的大小。
grid-template-rows: 100px 200px; grid-template-columns: 1fr 2fr 1fr;
上述代码将创建一个包含两行三列的网格，第一行高度为 100px，第二行高度为 200px，第一列和第三列的宽度相同，为第二列的两倍。
fr 单位
fr 是一种相对长度单位，根据可用空间按比例分配网格。例如，以下代码将创建一个包含两行两列的网格，第一行占用一半空间，第二行占用一半空间，第一列占用一半空间，第二列占用一半空间。
grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr;
repeat() 函数
可以使用 repeat() 函数来快速创建重复的网格行和列。例如，以下代码将创建一个包含四行三列的网格，每一行高度相同，为 50px，每一列宽度相同，为 1fr。
grid-template-rows: repeat(4, 50px); grid-template-columns: repeat(3, 1fr);
示例代码
以下是一个基本的示例，使用 grid-template-rows 和 grid-template-columns 属性来定义一个包含四行三列的网格。
-- -------------------- ---- ------- ---- ----------------------- ---- ----------- --------------- ---- ----------- --------------- ---- ----------- --------------- ---- ----------- --------------- ---- ----------- --------------- ---- ----------- --------------- ---- ----------- --------------- ---- ----------- --------------- ---- ----------- --------------- ------
-- -------------------- ---- ------- --------------- - -------- ----- ------------------- --------- ------- ---------------------- --------- ----- ---- ----- -------------- ------- ------------ ------- - ----- - ----------------- -------- ---------- ----- -------- ----- ---------------- ------- ------------ ------- -
在上述示例中，我们创建了一个包含四行三列的网格，每一行高度为 100px，每一列宽度为可用空间的三等分。我们还添加了间隔、内容居中对齐等样式。
总结
grid-template-rows 和 grid-template-columns 属性是 CSS 网格布局中非常有用的属性，可以用于定义网格的行和列。它们有许多不同的值，可以灵活地控制网格大小和位置。通过学习如何使用这两个属性，可以轻松创建复杂、自适应的网格布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bb2cacadd4f0e0ff3cceef