4

I'm specifically looking for a grid of 2 rows - row1 having 2 columns, row2 having 3 columns where each column/row (ie.item in the grid) is equally sized. It works using an empty div but obviously this isn't the preferred solution....

I've included some basic example html / css to show what I mean but I would like to achieve something like this without the use of the empty div....

CSS

html, body {
  height: 100%;
  margin: 0;
}

.grid {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.grid > div {
  display: flex; 
  flex-basis: calc(33.33% - 14px);  
  justify-content: center;
  flex-direction: column;
}

.grid > div > div {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.box { margin: 10px 0 10px 10px}
.box1 { background-color: red; }
.box2 { background-color: orange; }
.box3 { background-color: blue; }
.box4 { background-color: grey; }
.box5 { background-color: purple; }

HTML

<div class="grid">
  <div class="box box1">
    <div>
      one
    </div>
    <div>
      example content
    </div>    
  </div>
 <div class="box box2">
   <div>
     two
   </div>
   <div>
     example content
   </div> 
 </div>
 <div></div>
 <div class="box box3">
   <div>
     three
   </div> 
 </div>
 <div class="box box4">
   <div>
     four
   </div> 
 </div>
 <div class="box box5">
   <div>
     five
   </div> 
 </div>

DdRegalo
  • 60
  • 6
  • https://stackoverflow.com/questions/36004926/equal-height-rows-in-a-flex-container this suggests it's impossible with flexbox but possible with css grids – WillD Jul 23 '18 at 20:41
  • 1
    yeah I haven't found a way yet with flexbox but the solution from @Fr33d0m below gets the output without any empty divs...it's also possible with bootstrap but I just really wanted to make it work with flexbox... – DdRegalo Jul 23 '18 at 20:46

1 Answers1

2

With the space before

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container{
  width: 1000px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-gap: 1px;
}
.container > div{
  background-color: orangered;
  height: 50px;
}
.box1{
  grid-column: 2 / 3;
}
<div class="container">
<div class="box1">box 1</div>
<div class="box2">box 2</div>
<div class="box3">box 3</div>
<div class="box4">box 4</div>
<div class="box5">box5</div>
</div>

With the space after

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container{
  width: 1000px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-gap: 1px;
}
.container > div{
  background-color: orangered;
  height: 50px;
}
.box3{
  grid-column: 1 / 2;
}
<div class="container">
<div class="box1">box 1</div>
<div class="box2">box 2</div>
<div class="box3">box 3</div>
<div class="box4">box 4</div>
<div class="box5">box5</div>
</div>
mgm793
  • 1,968
  • 15
  • 23