css - css-grid-area中的项目可以流到多行吗

Question

问题

正如您在第一张图片中看到的那样，我们得到了一个 cssgrid，其中所有项目都很好地分布在所有行中，并且位于最佳位置。

初始点：

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, minmax(24px, 1fr));
  grid-auto-flow: column;
}

.item {
  height: 24px;
  border: 1px solid black;
  margin: 8px 0;
}

.aa {
  background-color: red;
}

.bb {
  background-color: green;
}

.cc {
  background-color: blue;
}

.dd {
  background-color: yellow;
}

<div class="grid-container">
  <div class="item aa" style="grid-column: 3 / span 1"></div>
  <div class="item bb" style="grid-column: 5 / span 1"></div>
  <div class="item cc" style="grid-column: 7 / span 1"></div>
  <div class="item cc" style="grid-column: 9 / span 1"></div>
  <div class="item bb" style="grid-column: 2 / span 4"></div>
  <div class="item dd" style="grid-column: 7 / span 3"></div>
  <div class="item bb" style="grid-column: 2 / span 8"></div>
  <div class="item bb" style="grid-column: 1 / span 6"></div>
  <div class="item bb" style="grid-column: 9 / span 3"></div>
  <div class="item dd" style="grid-column: 1 / span 11"></div>
</div>

其中一些项目具有相同的颜色，因此我正在寻找一种将它们组合在一起的方法，以便更容易找到合适的。在将 a 应用grid-template-area到容器并对应grid-area于项目之后，它们都夹在一行上，如第二张图片所示。

应用网格区域后：

    .grid-container {
      display: grid;
      grid-template-columns: repeat(12, minmax(24px, 1fr));
      grid-auto-flow: column;
      grid-template-areas: 
        'bb'
        'aa'
        'cc'
        'dd';
    }

    .item {
      height: 24px;
      border: 1px solid black;
      margin: 8px 0;
    }

    .aa {
      background-color: red;
    }

    .bb {
      background-color: green;
    }

    .cc {
      background-color: blue;
    }

    .dd {
      background-color: yellow;
    }

<div class="grid-container">
  <div class="item aa" style="grid-area: aa / 3 / aa / span 1"></div>
  <div class="item bb" style="grid-area: bb / 5 / cc / span 1"></div>
  <div class="item cc" style="grid-area: cc / 7 / cc / span 1"></div>
  <div class="item cc" style="grid-area: cc / 9 / cc / span 1"></div>
  <div class="item bb" style="grid-area: bb / 2 / bb / span 4"></div>
  <div class="item dd" style="grid-area: dd / 7 / dd / span 3"></div>
  <div class="item bb" style="grid-area: bb / 2 / bb / span 8"></div>
  <div class="item bb" style="grid-area: bb / 1 / bb / span 6"></div>
  <div class="item bb" style="grid-area: bb / 9 / bb / span 3"></div>
  <div class="item dd" style="grid-area: dd / 1 / dd / span 11"></div>
</div>

我正在寻找的解决方案

如第三张图片所示，我正在寻找一种将项目组合在一起的方法，但仍使用 cssgrid 以最佳方式定位项目。

我需要的：

相关问题css-grid持仓与持仓absolute top/ 的表现如何left？

标签： csscss-grid