CSS Grid 布局是一种用于网页布局的强大工具，它可以让我们更轻松地控制网页中的元素位置和大小。其中，grid-template-columns 和 grid-template-rows 是两个最基本的属性，用于控制网格的列数、列宽和行数、行高。
grid-template-columns
grid-template-columns 属性用于控制网格的列数和列宽。它可以接受多个值，每个值表示一列的宽度。可以使用像素、百分比、fr（单位表示可用空间的分数）等单位来指定宽度。如果有多个值，可以使用空格或斜杠分隔。
示例代码
---------- - -------- ----- ---------------------- ----- --- ---- -
上面的示例代码中，.container 是一个网格容器，它有三列，分别是 100 像素宽度的列、可用空间的 1/3 和可用空间的 2/3。
grid-template-rows
grid-template-rows 属性用于控制网格的行数和行高。它的用法和 grid-template-columns 很相似，也可以接受多个值，每个值表示一行的高度。
示例代码
---------- - -------- ----- ------------------- ---- ------ -
上面的示例代码中，.container 是一个网格容器，它有两行，分别是 50 像素高度的行和 100 像素高度的行。
使用网格模板
grid-template-columns 和 grid-template-rows 可以结合使用，通过网格模板来更方便地控制网格。网格模板是一种简单的语法，用于描述网格中的行和列。
示例代码
---------- -
-------- -----
---------------------- --------- -----
------------------- --------- -------
--------------
------- ------ -------
-------- ---- -----
------- ------ --------
-上面的示例代码中，.container 是一个网格容器，它有三列，每列的宽度是可用空间的 1/3，有两行，每行的高度是 100 像素。网格模板中定义了三行三列的网格，每个单元格的位置由行和列的名称指定。
总结
grid-template-columns 和 grid-template-rows 是 CSS Grid 布局中最基本的属性，用于控制网格的列数、列宽和行数、行高。通过网格模板，我们可以更方便地控制网格。在实际开发中，我们可以根据需要灵活使用这两个属性，以达到更好的布局效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66016fc3d10417a222ca108c