响应式网格宽度不同高度列

Question

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

使用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>

和我的 CSS:

.box {
  display:inline-block;
  margin:0;
  float:left;
}

.one {
  background:#000;
  color:#fff;
  width:40%;
  height:400px;
}
.two {
  background:#ddd;
  color:#000;
  width:60%;
  height:200px;
}
.three {
  background:#efefef;
  color:#000;
  width:30%;
  height:400px;
}
.four {
  background:#222;
  color:#fff;
  width:30%;
  height:200px;
}
.five {
  background:#754;
  color:#fff;
  width:30%;
  height:200px;
}
.six {
  background:#c3d;
  color:#fff;
  width:30%;
  height:200px;
}

我在Codepen中设置：

https://codepen.io/maniac123/pen/oQbgMr

有人知道如何让最后的“6”div 排在“1”之下吗？

Answer 1

你应该使用CSS-grid，

我建议先调查一下..

但这是如何完成的：

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

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

列从左到右，行从上到下

这只会做第一个，其余的应该以同样的方式完成

Answer 2

试试这个方法：

<div class="container"> <div class="box" style="width: 40%;"> <div class="one" style="width: 100%;"> 1 </div> <div class="six" style="width: 100%;"> 6 </div> </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>

Answer 3

鉴于您为块使用固定高度，您可以使用以下内容：

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

不过我还是建议看看 CSS Grid。

Answer 4

如果你愿意使用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;
}

这是一个代码笔：https://codepen.io/anon/pen/vQLOxy

在我的示例中，我使用的是命名网格区域。如果您想将其中一个块位置与另一个交换。您可以交换它们的 grid-area 属性。

如果您确实选择了此选项，我建议您更多地了解 CSS 网格，因为它会让生活变得更轻松。这是一篇您可以阅读更多内容的文章：https://css-tricks.com/snippets/css/complete-guide-grid/

响应式网格宽度不同高度列

responsive grid width different height columns

html

css

grid

responsive