CODEWITHSUNDEEP
htmlcssflexbox
Joelgullander
Joelgullander

Reputation: 1684

Accomplishing this grid with css

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.

enter image description here

Upvotes: 0

Views: 60

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122105

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>

Upvotes: 1

Mohammad Usman
Mohammad Usman

Reputation: 39382

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>

Upvotes: 1

Related Questions