html - 什么定义了显式网格？

Question

MDN 使用 following 定义了一个显式网格:

Whereas the explicit grid consists of any rows and columns defined with grid-template-columns or grid-template-rows.

所以显式网格可以有一个单个 grid-template-columns/grid-template-rows？

例如

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-auto-rows: 75px;
}

根据定义，这个 css 应该创建一个明确的网格，因为它包含一个 grid-template-columns，因此 grid-auto-rows 不应该应用，或者仅适用于第 2 行或以下的网格轨道，但适用于所有网格轨道。

但是，如果我应用 grid-template-columns 和 grid-template-rows 似乎会创建一个明确的网格。

.wrapper {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: 20px;
  grid-auto-rows: 75px;
}

我是不是误解了显式网格的定义，还是遗漏了什么？

Answer 1

thus grid-auto-rows should not apply, or only apply on the grid tracks at grid row 2 or below, but it applies to all the grid tracks.

你误解了grid-auto-rows

The grid-auto-columns and grid-auto-rows properties specify the size of tracks not assigned a size by grid-template-rows or grid-template-columns. If multiple track sizes are given, the pattern is repeated as necessary to find the size of the affected tracks. The first track after the last explicitly-sized track receives the first specified size, and so on forwards; ^ref

grid-auto-rows 不仅会调整隐式行的大小，还会调整任何未调整大小的行(包括显式行)。在您的第一个示例中，您定义了 2 个显式列并且您有 5 个元素，因此您将以 3 个隐式行结束，所有行的大小都使用 grid-auto-rows

在上一个示例中，您定义了 2 列和 1 行(具有大小)，因此浏览器将使用 grid-auto-rows 来定义剩余 2 行的大小。

这是另一个例子:

.wrapper {
  display: grid;
  grid-template-areas:
    ". ."
    ". ."
    ". ."
    ". ."
    ". .";
  grid-auto-rows: 75px;
  border: 1px solid;
}

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

我定义了一个包含 2 个显式列和 5 个显式行但没有调整大小的网格。浏览器将使所有行等于 75px