Fill up blank space

Question

As shown below, the purple, light blue and yellow are located lower. I would like them to fill up the space above them. I have a fix 4 columns per row but the height of each column will not be fix. How can I make this dynamic?

Are you looking for a grid like pinterest? Library: http://masonry.desandro.com/ — Philip, Jul 24 '16 at 15:20
If you're looking for a CSS-only solution, [multi-column layouts] (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts) is probably your only option. Otherwise see Phil's suggestion. — Faust, Jul 24 '16 at 15:32

score 0 · Accepted Answer · answered Jul 24 '16 at 15:51

0

use

display : inline-block;
float : left;
clear : none

answered Jul 24 '16 at 15:51

Kavian Rabbani

934
5
15

When using `float: left`, `display: inline-block` is no longer needed due to the float overwriting the display property (although some odd text positioning combined with float might even work). – SidOfc Jul 24 '16 at 17:48

score 0 · Answer 2 · answered Jul 24 '16 at 17:14

Use flexbox layout for obtaining this.

Something like below will help. Use the css below in the container of the boxes and then set the width and height of the boxes. height can be dynamic . either set the height of the boxes as auto or a percent value.

.container{
  width:200px;
  display: -ms-flexbox;
  -ms-flex-direction: column;
  -ms-flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vw;
}

Fill up blank space

2 Answers2