CSS Grid 学习笔记二：grid-template-rows 和 grid-template-columns-JavaScript中文网-JavaScript教程资源分享门户

在之前的笔记中，我们已经学习了如何使用 CSS Grid 来创建网格布局。本篇笔记将详细介绍 grid-template-rows 和 grid-template-columns 这两个属性，它们是定义网格行和列的关键。

定义网格行

要定义网格行，我们可以使用 grid-template-rows 属性。这个属性接受一个值的列表，用空格分隔，每个值代表一行的高度。值可以是一个具体的长度值（如 100px），也可以是一个比例（如 1fr）。

下面是一个例子，它定义了一个高度为 100px 的行和一个高度为 200px 的行：

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

我们还可以使用 minmax 函数定义一个行的最小和最大高度。例如，我们可以将上面的示例改为如下所示：

.grid {
  display: grid;
  grid-template-rows: minmax(100px, auto) minmax(200px, auto);
}

这意味着第一行的最小高度为 100px，最大高度为自动计算；而第二行的最小高度为 200px，最大高度也是自动计算。

有时候，一个网格项目可能会跨越多行或多列。在这种情况下，我们可以使用 grid-auto-rows 属性定义自动创建的网格行的高度。

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

在这个示例中，我们定义了一个由三列和自动行组成的网格。自动行的高度为 100px。

类似地，要定义网格列，我们可以使用 grid-template-columns 属性。这个属性接受一个值的列表，用空格分隔，每个值代表一列的宽度。值可以是一个具体的长度值（如 100px），也可以是一个比例（如 1fr）。

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

在这个示例中，我们定义了三列：第一列的宽度为 200px；第二列的宽度为网格容器的宽度的 1/3；第三列的宽度为网格容器的宽度的 2/3。

和自动网格行类似，有时候我们需要自动创建网格列。在这种情况下，我们可以使用 grid-auto-columns 属性定义自动创建的网格列的宽度。

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

在这个示例中，我们定义了一个由两行和自动列组成的网格。自动列的宽度为 100px。

最后，让我们看一下如何创建响应式网格布局。在之前的笔记中，我们已经了解到可以使用媒体查询来修改样式，以适应不同的屏幕大小。

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

在这个示例中，我们定义了一个媒体查询，使得当屏幕宽度大于 768px 时，网格容器将变成由三列组成。这是一个响应式的布局，可以让我们在不同的屏幕尺寸上提供最佳的用户体验。

grid-template-rows 和 grid-template-columns 是定义网格行和列的关键。使用这些属性，我们可以轻松地创建包含多行和多列的网格布局，并在需要时创建自动行和列。使用这些技术，我们可以创建响应式的网格布局，以适应不同的屏幕尺寸。

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