css - 如何在使用 grid 或 flex 中实现这种风格？

Question

我想要实现的是这样的:

起初，我试图使用 flex 来实现这一点，但后来我意识到不可能为 red box 实现它，因为 flex 是一维的。

现在我想弄清楚如何让蓝框自动填充剩余的空间，看起来flex 是这项工作的完美选择，但在 grid 中是行不通的。

1. 是否可以使用网格实现蓝框？怎么样？
2. 如果不行，那红框有没有可能用flex来实现？如何？ (第 4 个图 block 占用两行。)

我现在想的是使用 grid 并为 red box 留出空白 并用单独的元素填充它。但我认为这是一个肮脏的把戏，棘手的部分是瓷砖是使用循环动态生成的。我正在使用 ul li

#container{
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap:2px;
  grid-row-gap:2px;
  width: 180px;
  list-style:none;
}

.item{
  height: 60px;
  width: 60px;
  background: grey;
}

<ul id="container">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

Edit: Sorry for confusion, maybe it was not clear but what I wanted is the last tile will fill the remaining space. I understand that I can, specifically use what column it will occupy in grid but I what I want is the behavior of flex-grow where it will consume the remaining space. Not necessarily the blue tile is in 3-5 column position. The number of tiles is dynamic.

Answer 1

如果我们考虑到红色元素将始终存在并且您将始终有 3 列的事实，那么我们可以轻松定义所有情况(它们总共只有 3 种，默认情况下为 1 种)

对于需要放置红色元素的位置也没有限制(或者可能很少限制)。

.container{
  display: inline-grid;
  grid-gap:2px;
  grid-template-columns:auto auto auto;
  grid-auto-rows:40px;
  grid-auto-columns:40px;
  width:130px;
  grid-auto-flow:dense; /* This one will make the element fill all the empty cells */
}

.item{
  background: grey;
}
.red {
  grid-column:span 2;
  grid-row:span 2;
  background:red;
}

.item:last-child:nth-child(3n+1) {
  grid-column:span 3;
  background:blue;
}
.item:last-child:nth-child(3n+2) {
  grid-column:span 2;
  background:blue;
}
.item:last-child:nth-child(3n+3) {
  background:blue;
}

/* Irrelevant styles */
.container {
  list-style:none;
  margin:5px;
  padding:0;
  border:1px solid green;
  vertical-align:top;
}

<ul class="container">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item red"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

<ul class="container">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item red"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

<ul class="container">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item red"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>
<ul class="container">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item red"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>
<ul class="container">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item red"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>
<ul class="container">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item red"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>
<ul class="container">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item red"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

<ul class="container">
  <li class="item red"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>
<ul class="container">
  <li class="item red"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>