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

Question

我想要实现的是这样的：

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

现在我正试图弄清楚如何让蓝色框 自动填充剩余的空间，这似乎flex是该工作的完美选择，但在grid.

1. 是否可以使用网格实现蓝框？如何？
2. 如果没有，那有没有可能用flex实现红框？如何？（第四个瓷砖消耗两行。）

我现在在想的是使用grid并为红色框留出一个空白空间并用单独的元素填充它。但我认为这是一个肮脏的把戏，棘手的部分是瓷砖是使用循环动态生成的。我正在使用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>

编辑：抱歉混淆，也许不清楚，但我想要的是最后一块瓷砖将填充剩余空间。我知道我可以专门使用它将占据的列，grid但我想要的是flex-grow它将消耗剩余空间的行为。蓝色瓷砖不一定在 3-5 列位置。瓦片的数量是动态的。

标签： cssflexboxcss-grid

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>