0

I have 4 block divs of uniform sizes 1x1, 2x1, 1x2, 2x2. I need these to fill the space on the page from top to bottom. So far I have them just float left and gets me about 70% there, but I need so if theres a 1x1 space for the next 1x1 size div to move to that space, if theres a 3x1 space to move a 2x1 div and a 1x1 div etc.

Current state: https://jsfiddle.net/grk7bdub/5/

.box {
  float: left;
  /*display: inline-block;*/
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  border: solid;
  border-color: white;
  padding: 5px;
}

.box1x1 {
  height: 200px;
  width: 200px;
  color: white;
  background-color: red;
}

.box2x1 {
  height: 200px;
  width: 400px;
  color: white;
  background-color: blue;
}

.box2x2 {
  height: 400px;
  width: 400px;
  color: white;
  background-color: green;
}

.box1x2 {
  height: 400px;
  width: 200px;
  color: white;
  background-color: orange;
}
<div class="box box1x1">hello</div>
<div class="box box1x1">hello</div>
<div class="box box1x1">hello</div>
<div class="box box2x2">sup</div>
<div class="box box1x1">hello</div>
<div class="box box1x2">hello</div>
<div class="box box1x1">hello</div>
<div class="box box2x1">hi</div>
<div class="box box2x2">sup</div>

Nothing fancy. How would I have it so the DIVs can move freely to fill space if it exists, the DIVs don't need to end up in a strict final order but if a general starting order could be specified that'd be great.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Vereonix
  • 1,341
  • 5
  • 27
  • 54
  • 2
    I'd suggest you look in to the [Masonry](https://masonry.desandro.com/) library, assuming you're not doing this as an educational excercise – Rory McCrossan Nov 27 '17 at 11:42
  • This is perfect exactly what I was looking for,I tried searching but couldn't put it into words. – Vereonix Nov 27 '17 at 12:02

0 Answers0