html - 嵌套的 CSS 网格行为异常

Question

如果您查看 Firefox 中的嵌套网格并查看网格显示，您将看到四个单独的嵌套网格，每个网格有 1 行和 12 列。但是，如果您查看 CSS 文件，您只能分配元素“main-services-text”、“main-banner-text”等，将其视为单个 4 行网格。

所以我的问题是，这是它应该工作的方式还是它是一个错误。我也应该使用它吗？

.main-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 100px 100px 100px 100px;
}

/* Step 1a assign the main elements "" to the MAIN Grid*/

.main-banner {
  grid-column: 1 /13;
  grid-row: 1 / 2;
  background-color: cornflowerblue;
}

.main-services {
  grid-column: 1 /13;
  grid-row: 2 / 3;
  background-color: lightcyan;
}

.main-why-us {
  grid-column: 1 /13;
  grid-row: 3 / 4;
  background-color: orange;
}

.main-who-are-we {
  grid-column: 1 /13;
  grid-row: 4 / 5;
  background-color: chocolate;
}


/* Step 2: Set up individual nested GRIDS*/

main section {
  display: grid;
  color: olive;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 100px;
}


/* Step 2 assign elements to the nested grids  */

.main-banner-text {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

.main-services-text {
  grid-column: 6 / 9;
  grid-row: 2 / 3;
}

.main-why-us-text {
  grid-column: 10 / 13;
  grid-row: 3 / 4;
}

.main-who-are-we-text {
  grid-column: 9 / 10;
  grid-row: 4 / 5;
}

<main class="main-grid">
  <section class="main-banner">Banner</section>
  <p class="main-banner-text">Main banner text</p>
  <section class="main-services">Services</section>
  <p class="main-services-text">Main services text</p>
  <section class="main-why-us">Why Us</section>
  <p class="main-why-us-text">Main Why us text</p>
  <section class="main-who-are-we">Who are we</section>
  <p class="main-who-are-we-text">Main who are we text</p>
</main>

标签： htmlcsscss-grid