CSS Grid 布局中如何使用 grid-template-columns 和 grid-template-rows 控制网格大小？-JavaScript中文网-JavaScript教程资源分享门户

CSS Grid 是一种强大的布局系统，可以让开发者轻松地创建复杂的网格布局。其中，grid-template-columns 和 grid-template-rows 是两个非常关键的属性，用于控制网格的列和行的大小和数量。

grid-template-columns 和 grid-template-rows 的基本用法

grid-template-columns 和 grid-template-rows 都是用来定义网格的列和行的大小和数量的属性。它们的基本用法非常简单，只需要在父容器上设置这两个属性的值即可。

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

上面的代码中，我们定义了一个包含 3 列和 3 行的网格布局，每一列的宽度为 100px，每一行的高度为 50px。

使用 repeat() 函数简化代码

如果需要定义多个相同大小的列或行，可以使用 repeat() 函数来简化代码。例如，下面的代码定义了 4 个宽度为 100px 的列和 2 个高度为 50px 的行。

.container {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(2, 50px);
}

使用 minmax() 函数控制网格大小的范围

minmax() 函数可以用来定义网格大小的范围，它接受两个参数，第一个参数是最小值，第二个参数是最大值。例如，下面的代码定义了 3 列，第一列的宽度为 100px，第二列的宽度为 200px 到 400px 之间，第三列的宽度为 1fr。

.container {
  display: grid;
  grid-template-columns: 100px minmax(200px, 400px) 1fr;
  grid-template-rows: repeat(3, 50px);
}

使用网格线命名

除了使用数字和单位来定义网格大小之外，还可以使用网格线命名来定义网格大小。网格线命名是一种给网格线起名字的方式，可以方便地引用这些网格线。例如，下面的代码定义了 4 个网格线，并使用这些网格线来定义列的大小。

.container {
  display: grid;
  grid-template-columns: [col1-start] 100px [col2-start] 200px [col3-start] 1fr [col4-start];
  grid-template-rows: repeat(3, 50px);
}

使用网格区域命名

网格区域命名是一种更高级的网格布局技巧，它可以让我们更方便地定义网格布局。网格区域命名可以用来给网格区域起名字，然后在网格布局中引用这些区域。例如，下面的代码定义了两个网格区域，一个叫做 header，一个叫做 main，然后使用这些区域来定义网格布局。

-- -------------------- ---- -------
---------- -
  -------- -----
  ---------------------- ----
  ------------------- ---- ----
  --------------------
    --------
    -------
-

------- -
  ---------- -------
-

----- -
  ---------- -----
-

总结

使用 grid-template-columns 和 grid-template-rows 可以轻松地定义网格布局的列和行的大小和数量。我们可以使用 repeat() 函数来简化代码，使用 minmax() 函数来控制网格大小的范围，使用网格线命名和网格区域命名来更方便地定义网格布局。掌握这些技巧，可以让我们更轻松地创建复杂的网格布局，提高开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65ffc4e8d10417a222b026b5