CSS网格布局-内部单元包装

如何解决CSS网格布局-内部单元包装

我想在以下位置创建网格布局：

• 第一个（灰色）细胞始终保持完整
• 如果没有足够的空间，第二个（橙色）和第三个（绿色）单元将换行到下一行
• 第四个人占据了所有可用空间

我试图通过flexbox，css网格，浮动和表格布局来实现它。到目前为止没有成功。

有可能吗？

注意：

• 最好没有JS修改/计算，例如切换类，设置宽度等。
• 没有媒体查询，这意味着可以控制单元格换行的时间
• 没有固定宽度

.row {
  display: grid;
  grid-template-columns: max-content max-content max-content 1fr;
  grid-gap: 5px;
}

.row:after {
  background-color: red;
  content: '';
}

.row__cell {
  padding: 5px;
}

.row__cell--gray {
  background-color: grey;
}

.row__cell--orange {
  background-color: orange;
}

.row__cell--green {
  background-color: green;
}

<div class="row">
  <div class="row__cell row__cell--gray">Gray</div>
  <div class="row__cell row__cell--orange">Orange</div>
  <div class="row__cell row__cell--green">Green</div>
</div>

解决方法

这不是一个完整的解决方案，但希望能为您指明正确的方向。需要进行其他调整。

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.row__cell {
  padding: 5px;
}

.row__cell--gray {
  background-color: grey;
  width: 20%;
  min-width: 200px;
}

.row__cell--orange {
  background-color: orange;
  width: 15%;
  min-width: 150px;
}

.row__cell--green {
  background-color: green;
  width: 15%;
  min-width: 150px;
}

.row__cell--red {
  background-color: red;
  float: right;
  width: auto;
  min-width: 400px;
}

<div class="row__cell row__cell--red">Red</div>
<div class="row">
  <div class="row__cell row__cell--gray">Gray</div>
  <div class="row__cell row__cell--orange">Orange</div>
  <div class="row__cell row__cell--green">Green</div>
</div>