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

【问题标题】：How to achieve this style in using grid or flex?如何在使用 grid 或 flex 时实现这种风格？
【发布时间】：2020-01-14 21:15:54
【问题描述】：

我想要达到的效果是这样的：

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

现在我正在尝试弄清楚如何使 蓝色框 自动填充看起来 @987654324 的剩余空间@ 非常适合这项工作，但在 grid 中不可行。

是否可以使用网格实现蓝框？怎么样？
如果不行，那么是否可以用flex实现红框？如何？（第 4 个图块占用两行。）

我现在想的是使用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 列位置。瓦片的数量是动态的。

【问题讨论】：

你想放大红框吗？
@ManojKumar 更有可能，不确定这是否是正确的术语，但我希望第 4 个图块的大小为 2x2

标签： css flexbox css-grid

【解决方案1】：

你的标记是错误的。需要关闭<ul>。此外，与其为每个.item 指定尺寸，不如将#container 拆分为具有所需行和列大小的单元格，并相应地使.item 跨度。

#container{
  display: grid;
  grid-template-columns: repeat(3, 60px);
  grid-template-rows:repeat(4, 60px);
  grid-gap:2px;
  width: 180px;
  list-style:none;
}

.item{
  background: grey;
}

.blue{
  background-color: blue;
  grid-column:2/-1;
  grid-row:4/5;
}
.red{
  background-color: red;
  grid-column:1/3;
  grid-row:2/4;
}

<ul id="container">
  <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>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item blue"></li>
</ul>

【讨论】：

感谢您的回答，但我正在寻找一个解决方案，即最后一个图块将自动填充剩余空间，正如我在问题中提到的那样。

【解决方案2】：

#container{
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: repeat(4, 60px);
  grid-gap: 2px;
  width: 180px;
  list-style: none;
}

.item{
  background: grey;
}

.blue-box {
  background-color: blue;
  grid-column: 2/-1;
  grid-row: 4;
}

.red-box{
  background-color: red;
  grid-column: 1/3;
  grid-row: 2/4;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<ul id="container">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item red-box"></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 blue-box"></li>
</ul>
</body>
</html>

您可以使用网格轻松实现此目的，但请检查它是否适用于 IE/Edge。在我的一个项目中，即使使用-ms- / -moz-，这些浏览器也不支持网格

我还提供Autoprefixer生成的代码

#container{
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 2px auto 2px auto;
  grid-template-columns: auto auto auto;
  -ms-grid-rows: 60px 2px 60px 2px 60px 2px 60px;
  grid-template-rows: repeat(4, 60px);
  grid-gap: 2px;
  width: 180px;
  list-style: none;
}#container > *:nth-child(1){
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}#container > *:nth-child(2){
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}#container > *:nth-child(3){
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}#container > *:nth-child(4){
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}#container > *:nth-child(5){
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}#container > *:nth-child(6){
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}#container > *:nth-child(7){
  -ms-grid-row: 5;
  -ms-grid-column: 1;
}#container > *:nth-child(8){
  -ms-grid-row: 5;
  -ms-grid-column: 3;
}#container > *:nth-child(9){
  -ms-grid-row: 5;
  -ms-grid-column: 5;
}#container > *:nth-child(10){
  -ms-grid-row: 7;
  -ms-grid-column: 1;
}#container > *:nth-child(11){
  -ms-grid-row: 7;
  -ms-grid-column: 3;
}#container > *:nth-child(12){
  -ms-grid-row: 7;
  -ms-grid-column: 5;
}

.item{
  background: grey;
}

.blue-box {
  background-color: blue;
  grid-column: 2/-1;
  -ms-grid-row: 4;
  grid-row: 4;
}

.red-box{
  background-color: red;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-row: 2/4;
}

【讨论】：

与我对 Robin 的评论相同，当我尝试从您的答案中删除一个 <li> 时，最后一个图块不会占用剩余空间，这是我所期望的结果。谢谢

【解决方案3】：

如果我们考虑到红色元素将始终存在并且您将始终有 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>

【讨论】：

哇，好整洁。我也在尝试自己，我发现使用grid-column-end: -1; 似乎可以在水平方向填充grid 布局中的剩余空间，但缺点是我需要知道该列将从哪里开始。谢谢。