基础 CSS XY 网格折叠单元格

网格布局是 CSS3 中一个全新的布局方式，它可以让开发者更加方便地创建复杂的布局。其中一项很有用的功能是网格单元格折叠，可以使得单元格在嵌套时不额外占用空间。

网格布局

网格布局由一个网格容器和一个或多个网格项目组成。其中，网格容器是通过 display: grid 属性声明的，而网格项目则是该网格容器下的子元素。以下是一个简单的网格布局示例：

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}

上面的例子中，我们先声明了一个网格容器 .grid-container，然后通过 grid-template-columns 和 grid-template-rows 属性定义了网格的行列结构，最后通过 gap 属性设置了单元格间隔为 10px。

单元格折叠

在上面的例子中，每个单元格都占用了一个完整的网格，但有些时候，一个网格单元格可以同时占用多个单元格，这时就需要用到单元格折叠。

CSS 提供了一个叫做 grid-template-areas 的属性来定义网格单元格的折叠方式。该属性值是一个由单元格名称组成的字符串，每个单元格名称都以空格分隔。例如，如果我们想要在第一行占用第一列和第二列的单元格，可以这样定义：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
  grid-template-areas:
    "a a b"
    "c d d";
}

.grid-container div:nth-child(1) {
  grid-area: a;
}

.grid-container div:nth-child(2) {
  grid-area: b;
}

.grid-container div:nth-child(3) {
  grid-area: c;
}

.grid-container div:nth-child(4) {
  grid-area: d;
}

注意到我们将 grid-template-areas 属性的值设置为了一个两行三列的网格。第一行占用了第一、二列，第二行占用了第三列，从而折叠了第一个单元格。接着，我们通过 grid-area 属性指定了每个单元格的名称，并且将其放置到了对应的位置上。

折叠多个单元格

如果我们想要在上面的例子中将第一个单元格和第二个单元格都折叠成一个单元格，可以这样定义：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
  grid-template-areas:
    "a b b"
    "c d e";
}

.grid-container div:nth-child(1) {
  grid-area: a;
}

.grid-container div:nth-child(2) {
  grid-area: b;
}

.grid-container div:nth-child(3) {
  grid-area: c;
}

.grid-container div:nth-child(4) {
  grid-area: d;
}

.grid-container div:nth-child(5) {
  grid-area: e;
}

注意到我们将第一行的第一列和第二列都设置成了 b，从而将第一个单元格和第二个单元格折叠成了一个单元格。

总结

网格单元格折叠是网格布局中一个很有用的功能，它可以让单元格在嵌套时不额外占用空间。我们可以通过 grid-template-areas 属性来定义单元格的折叠方式，然后通过 grid-area 属性将每个单元格放置在对应的位置上。