responsive grid width different height columns

Question

I'm trying to recreate this:

Using HTML/CSS, so that each coloured block is a div that I can add content into. It needs to be responsive, but I think I can work that out using Media Queries.

I've managed to get the layout working for all blocks, apart from the bottom left one! I just can't get it to slot into the gap under the top left block.

Here's my 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>

and my 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;
}

I set it up in Codepen:

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

Anyone know how to get that final "6" div to slot in under "1"?

Answer 1

If you are willing to use CSS Grid. Then I'd recommend using it. Plus, it makes the code a lot easier to handle.

Here's the 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;
}

And here's a codepen: https://codepen.io/anon/pen/vQLOxy

In my example, I'm using named grid areas. If you want to swap one of the blocks positions with another. You can swap their grid-area properties.

If you do choose this option, I'd recommend you look more into CSS Grid, as it makes life a lot easier. Here's an article where you can read up on it more: https://css-tricks.com/snippets/css/complete-guide-grid/

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

You should use CSS-grid,

I would suggest looking into it before anything else..

but here is how it could be done:

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

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

where colums is going left to right, and rows is top to bottom

this will only do the first one , the rest should be done in the same way

Answer 4

Seeing as you are using fixed heights for the blocks, you could use the following:

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

I would recommend having a look at CSS Grid though.