CODEWITHSUNDEEP
cssflexbox
Pepe
Pepe

Reputation: 1002

Little Grid with Flexbox

I try to create this little gallery grid with flexbox, but I fail all time.

enter image description here

Is it possible with flexbox? Here is my example and fiddle.

<div class="gallery">
    <div class="box one">Box 1</div>
    <div class="box two">Box 2</div>
    <div class="box three">Box 3</div>
    <div class="box four">Box 4</div>
    <div class="box five">Box 5</div>
</div>

.gallery {
    display:flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;}

.gallery .box {
    background:#ccc;
    height:250px;
    width:33.33333%;}

.gallery .box.one,
.gallery .box.two { 
    -webkit-flex:1;
    flex: 1;}

.gallery .box.three {
    height:500px;}

.gallery .box.four,
.gallery .box.five {
    -webkit-flex:1;
    flex: 1;}

Upvotes: 1

Views: 71

Answers (2)

Anonymous
Anonymous

Reputation: 1990

You can try something like this:

  1. create 3 parent divs .
  2. create two child divs in each 1st and 3rd div with width 100% and height 50% and flex-direction column.

#grid{
  width:100%;
  height:500px;
  background:#eee;
  display:flex;
  
}
#p1,#p2,#p3{
  width:33%;
 border:2px solid #fff;
  display:flex;
 flex-direction:column;
}
#pone,#ptwo,#p31,#p32{
  flex-basis:100%;
  height:50%;
   border:3px solid white;
  
  
}
<div id="grid">


<div id="p1">
<div id="pone">

</div>
<div id="ptwo">

</div>
</div>
<div id="p2">

</div>
<div id="p3">
<div id="p31">

</div>
<div id="p32">

</div>

</div>
</div>

Upvotes: 0

Michael Evans
Michael Evans

Reputation: 1011

Ok, so have you tried using flex-direction: column? It requires a slight change in the way you think about flexbox. Try the following:

.gallery {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 200px; // or however you want to do it, required for wrapping
}

.box {
  height: 100px;
}

.three {
  height: 200px;
}

Upvotes: 1

Related Questions