Accomplishing this grid with css

Question

Can I accomplish this grid layout with flexbox? To have the first element take up 2 rows height and then continue after it?

Check image.

Well I am looping out 5 elements so it'd be good if I could have the same markup for every box. @NenadVracar — Joelgullander, Feb 06 '17 at 10:53

score 1 · Accepted Answer · answered Feb 06 '17 at 10:56

You can achive it by dividing this layout in 2 columns while the 2nd column will have a nested flexbox layout as well.

HTML Structure:

<div class="container">
  <div class="col box1">1</div>
  <div class="col col2">
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    <div class="box5">5</div>
  </div>
</div>

Necessary Styles:

.container {
  min-height: 100vh;
  display: flex;
}
.col {
  flex-grow: 1;
  color: #fff;
}
.col2 {
  flex-wrap: wrap;
  display: flex;
}
.col2 > div {
  flex-basis: 50%;
  flex-grow: 1;
}
.box1 {
  display: flex;
}

* {box-sizing: border-box;}
body {
  margin: 0;
}
.container {
  min-height: 100vh;
  display: flex;
}

.col {
  flex-grow: 1;
  color: #fff;
}

.col2 {
  flex-wrap: wrap;
  display: flex;
}

.col2 > div {
  flex-basis: 50%;
  padding: 10px;
  flex-grow: 1;
}

.box1 {
  background: brown;
  padding: 10px;
  display: flex;
}
.box2 {
  background: pink;
}
.box3 {
  background: black;
}
.box4 {
  background: yellow;
}
.box5 {
  background: royalblue;
}

<div class="container">
  <div class="col box1">1</div>
  <div class="col col2">
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    <div class="box5">5</div>
  </div>
</div>

Thanks for your effort! I am having one issue. I am getting a white space on the bottom of each box. I am using an image in the boxes. Do you know what could be wrong? — Joelgullander, Feb 06 '17 at 11:20
@Codehiker Make your images `display: block` or add `vertical-align: top`. — Mohammad Usman, Feb 06 '17 at 11:21
@Codehiker Check this [Question](http://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image) for more details. — Mohammad Usman, Feb 06 '17 at 11:22

score 1 · Answer 2 · answered Feb 06 '17 at 10:59

You can use this HTML structure but you need to set fixed height on parent div. Then you just use flex-direction: column and flex-wrap: wrap.

* {
  box-sizing: border-box;
}
.content {
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
div div:first-child {
  flex: 0 0 100%;
  width: 50%;
  background: #880015;
}
div div:not(:first-child) {
  width: 25%;
  flex: 0 0 50%;
  border: 1px solid black;
}

<div class="content">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

Accomplishing this grid with css

2 Answers2