0

With the following markup, I want to have the below-attached layout using the flex system (not with grid) and without changing the markup structure.

HTML:

<div class="container">
  <div class="box box-1">item1</div>
  <div class="box box-2">item2</div>
  <div class="box box-3">item3</div>
  <div class="box box-4">item4</div>
  <div class="box box-5">item5</div>
  <div class="box box-6">item6</div>
</div>

sample image

Krishna Chaitanya
  • 27
  • 4

2 Answers2

0

.grid {
  display: grid;
  grid-template-columns: repeat(2, 300px);
  grid-gap: 20px;
}

.box {
  background-color: red;
  padding: 20px;
  &-2 {
    grid-row-end: span 5;
  }
}
<div class="grid">
  <div class="box box-1">item1</div>
  <div class="box box-2">item2</div>
  <div class="box box-3">item3</div>
  <div class="box box-4">item4</div>
  <div class="box box-5">item5</div>
  <div style="display:flex;">
    <div class="box" style="flex-grow: 1;">item6</div>
    <div class="box" style="flex-grow: 1;">item7</div>
  </div>
</div>
Tony
  • 894
  • 4
  • 19
-1

Check this :

.grid {
  display: grid;
  grid-template-columns: repeat(2, 300px);
  grid-row-gap: 20px;
  grid-column-gap: 10px;
}

.box {
  background-color: red;
  padding: 20px;
}

.box-2 {
  grid-row-end: span 4;
}

.tempBox{
  grid-template-columns: auto auto;
}
<div class="grid">
  <div class="box box-1">item1</div>
  <div class="box box-2">item2</div>
  <div class="box box-3">item3</div>
  <div class="box box-4">item4</div>
  <div class="grid tempBox">
    <div class="box box-6">item5</div>
    <div class="box box-7">item6</div>
  </div>
</div>
Pranav Rustagi
  • 2,604
  • 1
  • 5
  • 18