CSS网格模板：根据单元格的类填充列

Question

我有一个简单的网格布局，其中单元格可以是100％或50％宽。有些单元格有.left或.right类。无论我的HTML树中这些单元格的顺序如何，是否可以将其附加到右侧或左侧，具体取决于它们的类，直到设置新的全宽度单元格为止？

到目前为止我使用的代码：

main{
  display:grid;
  grid-template:"top top" "left right";
}
section{
  grid-area:top;
}
section.left{
  grid-area:left;
}
section.right{
  grid-area:right;
}

编辑：@ wuppie367的答案完全解决了我的问题，以下是如何做到这一点：https://jsfiddle.net/r2myL1bt/

Answer 1

你可以像这样实现它。右边的元素将填充宽元素之间的空白，因此只有宽元素和左元素的顺序才重要。右边的元素将填补从上到下的空白。

＆＃13;

＆＃13;

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  width: 240px;
}

.main div {
  margin: 10px;
  width: auto;
  height: 100px;
}

.main .wide {
  grid-column: 1 / span 2;
  background-color: green;
}

.main .left {
  grid-column: 1 / 2;
  grid-row: auto;
  background-color: red;
}

.main .right {
  grid-column: 2 / 3;
  grid-row: auto;
  background-color: blue;
}

＆＃13;

<div class="main">
  <div class="wide"></div>
  <div class="left"></div>
  <div class="left"></div>
  <div class="right"></div>

  <div class="wide"></div>
  <div class="right"></div>
  <div class="right"></div>
  <div class="left"></div>
  <div class="left"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以将这个css添加到类中，如果它们都是50％宽度没有边距或填充，或者与那些50％相结合它们应该正确坐着。

.left{
float:left;
}
.right{
float:right;
}