HTML Grid，如何定义sections？

Question

我使用属性“显示：网格”定义了一个包含 9 个单元格的网格。

有没有办法在不破坏布局的情况下定义“部分”，像这样？

.display33grid {
  display: grid;
  grid-template-columns: 102px 102px 102px;
  grid-template-rows: 52px 52px 52px;
}

<div class="display33grid">
  <div>
    <div>Cell 1</div>
    <div>Cell 2</div>
    <div>Cell 3</div>
  </div>
  <div>Cell 4</div>
  <div>Cell 5</div>
  <div>Cell 6</div>
  <div>Cell 7</div>
  <div>Cell 8</div>
  <div>Cell 9</div>
</div>

Answer 1

看看这个网站，也许这会奏效:

https://www.w3schools.com/css/css_grid.asp

Answer 2

您可以让第一个子网格跨越三列，并使其子网格成为与父网格尺寸相同的 3 列网格。

这样视觉布局与简单的网格相同，但前三个元素被分组到它们自己的 'section'（代码中的 div 元素）。

.display33grid {
  display: grid;
  grid-template-columns: 102px 102px 102px;
  grid-template-rows: 52px 52px 52px;
}

.display33grid>*:first-child {
  grid-column: 1 / span 3;
  display: grid;
  grid-template-columns: 102px 102px 102px;
}

<div class="display33grid">
  <div>
    <div>Cell 1</div>
    <div>Cell 2</div>
    <div>Cell 3</div>
  </div>
  <div>Cell 4</div>
  <div>Cell 5</div>
  <div>Cell 6</div>
  <div>Cell 7</div>
  <div>Cell 8</div>
  <div>Cell 9</div>
</div>

HTML Grid，如何定义sections？

HTML Grid, how to define sections?

html

css

grid