Html 响应网格宽度不同高度的柱

我正在尝试重新创建这个：

使用HTML/CSS，这样每个彩色块都是一个div，我可以将内容添加到其中。它需要有响应性，但我想我可以通过媒体查询解决这个问题

除了左下角的那个块，我已经设法让所有块的布局都工作了！我就是没法把它插进左上块下面的缝隙里

这是我的HTML：

<div class="container">
  <div class="box one">
    1
  </div>
  <div class="box two">
    2
  </div>
  <div class="box three">
    3
  </div>
  <div class="box four">
    4
  </div>
  <div class="box five">
    5
  </div>
  <div class="box six">
    6
  </div>
</div>

我在Codepen中设置了它：

---

有人知道如何将最后的“6”div插入“1”下吗？

你应该使用CSS网格

我建议在做其他事情之前先调查一下

但这是如何做到的：

.container{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
}

.box-one{
  grid-column: 1/2;
  grid-row: 1/3;
}

列从左到右，行从上到下

这将只执行第一个操作，其余操作应以相同的方式执行

尝试以下方法：

1.
6.
2.
3.
4.
5.

鉴于您正在为块使用固定高度，您可以使用以下方法：

.six {
margin-top: -200px;
...
}

---

不过，我建议您看看CSS网格。

如果您愿意使用CSS网格。那我建议你用它。另外，它使代码更易于处理

以下是css：

.container {
    display: grid;
    grid-template-areas:
    "one two two"
    "one three four"
    "five three six";
}

.box{
  min-height: 200px;
}

.one {
    background: #000;
    color: #fff;
    grid-area: one;
}
.two {
    background: #ddd;
    color: #000;
    grid-area: two;
}
.three {
    background: #efefef;
    color: #000;
    grid-area: three;
}
.four {
    background: #222;
    color: #fff;
    grid-area: four;
}
.five {
    background: #754;
    color: #fff;
    grid-area: five;
}
.six {
    background: #c3d;
    color: #fff;
    grid-area: six;
}

这是一个密码笔：

在我的示例中，我使用命名网格区域。如果要将一个块位置与另一个块位置交换。您可以交换它们的

网格区域

属性

---

如果你真的选择了这个选项，我建议你多看看CSS网格，因为它让生活变得更轻松。这里有一篇文章，您可以从中进一步了解它：

您听说过css网格吗？这正是这个案例的答案否，也许你可以发布一个答案，显示它将被用来创建这个网格？谢谢，这是答案没有问题，很乐意帮助^^

.container {
    display: grid;
    grid-template-areas:
    "one two two"
    "one three four"
    "five three six";
}

.box{
  min-height: 200px;
}

.one {
    background: #000;
    color: #fff;
    grid-area: one;
}
.two {
    background: #ddd;
    color: #000;
    grid-area: two;
}
.three {
    background: #efefef;
    color: #000;
    grid-area: three;
}
.four {
    background: #222;
    color: #fff;
    grid-area: four;
}
.five {
    background: #754;
    color: #fff;
    grid-area: five;
}
.six {
    background: #c3d;
    color: #fff;
    grid-area: six;
}