CSS Grid 布局是一种新的布局方式，它可以帮助我们更方便地实现网页布局。在 CSS Grid 布局中，我们可以使用 grid-template-rows 和 grid-template-columns 属性来控制网格的行列数量，从而实现更灵活的布局。
grid-template-rows 和 grid-template-columns 属性
grid-template-rows 和 grid-template-columns 属性是 CSS Grid 布局中用来定义网格行和列的属性。它们都是一个由空格分隔的值列表，每个值可以是一个长度、百分比、自动或一个网格轨道名称。
定义网格行
我们可以使用 grid-template-rows 属性来定义网格的行。它的值可以是一个长度、百分比、自动或一个网格轨道名称。如果我们想定义多行，可以使用空格分隔它们。
--------------- - -------- ----- ------------------- ----- ----- ------ -
上面的代码定义了一个三行的网格，第一行高度为 100 像素，第二行高度为 200 像素，第三行高度为 300 像素。
我们也可以使用百分比来定义行高，例如：
--------------- - -------- ----- ------------------- --- --- ---- -
这样，我们就定义了一个三行的网格，第一行高度为容器高度的 10%，第二行高度为容器高度的 20%，第三行高度为容器高度的 30%。
如果我们想让某一行的高度自适应，可以将它的值设置为 auto。例如：
--------------- - -------- ----- ------------------- ----- ---- ------ -
这样，第二行的高度就会自适应并填满剩余的空间。
我们还可以使用网格轨道名称来定义行高。网格轨道名称是一个自定义的名字，我们可以在定义网格模板时使用它们。例如：
--------------- - -------- ----- ------------------- -------- ----- --------- ---- -------- ---- ------ -
这样，我们就定义了一个五行的网格，其中第一行命名为 header，高度为 100 像素；第二行命名为 content，高度自适应；第三行命名为 footer，高度为 50 像素；第四行命名为 end。
定义网格列
我们可以使用 grid-template-columns 属性来定义网格的列。它的值可以是一个长度、百分比、自动或一个网格轨道名称。如果我们想定义多列，可以使用空格分隔它们。
--------------- - -------- ----- ---------------------- ----- ----- ------ -
上面的代码定义了一个三列的网格，第一列宽度为 100 像素，第二列宽度为 200 像素，第三列宽度为 300 像素。
我们也可以使用百分比来定义列宽，例如：
--------------- - -------- ----- ---------------------- --- --- ---- -
这样，我们就定义了一个三列的网格，第一列宽度为容器宽度的 10%，第二列宽度为容器宽度的 20%，第三列宽度为容器宽度的 30%。
如果我们想让某一列的宽度自适应，可以将它的值设置为 auto。例如：
--------------- - -------- ----- ---------------------- ----- ---- ------ -
这样，第二列的宽度就会自适应并填满剩余的空间。
我们还可以使用网格轨道名称来定义列宽。网格轨道名称是一个自定义的名字，我们可以在定义网格模板时使用它们。例如：
--------------- - -------- ----- ---------------------- --------- ----- --------- ---- ------ -
这样，我们就定义了一个三列的网格，其中第一列命名为 sidebar，宽度为 100 像素；第二列命名为 content，宽度自适应；第三列命名为 end。
示例代码
下面是一个使用 grid-template-rows 和 grid-template-columns 属性的示例代码：
---- ----------------------- ---- --------------------------- ---- ----------------------------- ---- ----------------------------- ---- --------------------------- ------ ------- --------------- - -------- ----- ------------------- ----- ---- ----- ---------------------- ----- ----- --------- ----- ------- ------ - ------- - --------- - - -- ------------ - - -- ----------------- ----- - -------- - --------- - - -- ------------ - - -- ----------------- ----- - -------- - --------- - - -- ------------ - - -- ----------------- ----- - ------- - --------- - - -- ------------ - - -- ----------------- ----- - --------
上面的代码定义了一个网格布局，其中有一个头部、一个侧边栏、一个内容区和一个底部。头部和底部的高度固定，侧边栏和内容区的宽度自适应。整个布局的高度为 500 像素，有 10 像素的间隔。
总结
使用 grid-template-rows 和 grid-template-columns 属性可以帮助我们更方便地控制网格的行列数量，从而实现更灵活的布局。我们可以使用长度、百分比、自动或网格轨道名称来定义行列的大小和数量。在实际开发中，我们可以根据实际需求来使用这两个属性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ffe94fd10417a222b285bc