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

Question

我试图让我的 css 网格要么是每行 2 个块（如果有足够的项目），要么是一个跨越整个宽度的块。但是，我似乎无法使用 grid-auto-column 让它工作。

顶部块是我想要的样子，底部块是我当前的 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 来说，这是一项完美而简单的工作，因为您只需要处理one 或 单维布局，在您的情况下为 rows。

下面我为您提供 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>

Answer 2

使用grid-template-areas: "a b" "c c";（在html中将.grid1更改为.grid）

还将grid-area:; 设置为.grid 内的每个div

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

.grid {
  display: grid;
  grid-auto-columns: minmax(50%, 100%);
  grid-template-areas: "a b" "c c";
}

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" style="grid-area: a;">
  </div>
  <div class="blue height" style="grid-area: b;">
  </div>
  <div class="green height" style="grid-area: c;">
  </div>  
</div>