CSS Grid 布局中如何使用 grid-template-columns 和 grid-template-rows 控制网格的宽度和高度？

CSS Grid 布局是一种用于网页布局的强大工具，它可以让我们更轻松地控制网页中的元素位置和大小。其中，grid-template-columns 和 grid-template-rows 是两个最基本的属性，用于控制网格的列数、列宽和行数、行高。

grid-template-columns

grid-template-columns 属性用于控制网格的列数和列宽。它可以接受多个值，每个值表示一列的宽度。可以使用像素、百分比、fr（单位表示可用空间的分数）等单位来指定宽度。如果有多个值，可以使用空格或斜杠分隔。

示例代码

.container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
}

上面的示例代码中，.container 是一个网格容器，它有三列，分别是 100 像素宽度的列、可用空间的 1/3 和可用空间的 2/3。

grid-template-rows

grid-template-rows 属性用于控制网格的行数和行高。它的用法和 grid-template-columns 很相似，也可以接受多个值，每个值表示一行的高度。

示例代码

.container {
  display: grid;
  grid-template-rows: 50px 100px;
}

上面的示例代码中，.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