html - css - 使用 grid-auto-column 创建动态宽度

Question

我试图让我的 css 网格成为每行 2 个 block (如果有足够的元素)或一个跨越整个宽度的 block 。但是，我似乎无法使用 grid-auto-column 让它工作。

顶部的 block 是我想要的样子，底部的 block 是我当前的 css 创建的。

.flex1 {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.grid1 {
  display: grid;
  grid-auto-columns: minmax(50%, 100%);
}

div.height {
  height: 50px;
  width: 100%;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

<div class="flex1">
  <div class="red height">
  </div>
  <div class="blue height">
  </div>
</div>
<div>
  <div class="green height">
  </div>
</div>

<br><br>

<div class="grid">
  <div class="red height">
  </div>
  <div class="blue height">
  </div>
  <div class="green height">
  </div>  
</div>

Answer 1

不幸的是，据我所知，这对于 Grid 是不可能的，但对于 Flexbox 来说这是一个完美而简单的工作，因为您只需要处理一个或单维布局，在您的情况下是行。

下面我为您提供了 flex-items 所需结果/行为的较短版本，标记和样式较少:

.flex {
  display: flex;
  flex-wrap: wrap; /* enables wrapping of flex-items */
}

.flex > div {
  flex: 1 0 50%; /* grows full width if alone in a row / doesn't shrink / initial width set to 50%, i.e. can't be less than 50% of the parent's width */
  height: 50px;
}

.red {background: red}
.blue {background: blue}
.green {background: green}
.yellow {background: yellow}

<div class="flex">
  <div class="red"></div>
</div>
<br>
<div class="flex">
  <div class="red"></div>
  <div class="blue"></div>
</div>
<br>
<div class="flex">
  <div class="red"></div>
  <div class="blue"></div>
  <div class="green"></div>
</div>
<br>
<div class="flex">
  <div class="red"></div>
  <div class="blue"></div>
  <div class="green"></div>
  <div class="yellow"></div>
</div>