CSS - How do you create floating elements in columns?

Question

I have a 3 column layout on my application where the items in the columns are all of equal width but varying height. I would like the items in the columns to take up all the available space per column. Image attached.

Any ideas on how to do this with CSS? Given a HTML layout like such:

<div className="container">
   <div className="item">
   <div className="item">
   <div className="item">
   <div className="item">
   <div className="item">
   <div className="item">
   ...
</div>

I was thinking of just working JSX in React to actually create 3 columns but I thought there might be a simple CSS way to do it.

What browsers do you need to support? Seems like a good scenario for using css `flexbox` — JanR, Jan 24 '19 at 05:29
flexbox is pretty well supported now so it should be fine. Im just not experienced enough with it to figure out a solution that easily — Programmingjoe, Jan 24 '19 at 05:30
https://w3bits.com/labs/flexbox-masonry/2/ - You need 'VERTICAL MASONRY' from the link I guess. — divy3993, Jan 24 '19 at 05:31
send me what you have tried. we cannot do everything for you — Xenio Gracias, Jan 24 '19 at 05:33
JSX in React? I'm hearing *React* everywhere nowadays. That just sucks. — mrReiha, Jan 24 '19 at 05:35
You might want to look for a library. Like https://github.com/shashankraider/react-bricks or https://github.com/paulcollett/react-masonry-css. — GG., Jan 24 '19 at 05:35

Programmingjoe · Accepted Answer · 2019-01-24T05:49:33.383

Thanks @divy3993 for the link: https://w3bits.com/labs/flexbox-masonry/2/ It's a lot easier to google about this once you realize the coined term is 'Masonry'.

The parent container (.container in my example) has the styles:

.masonry { 
  display: flex;
  flex-flow: column wrap;
  max-height: 800px;
  margin-left: -8px; /* Adjustment for the gutter */
  width: 100%;
}

The bricks should also have a little spacing (.item in my example):

.masonry-brick {
  margin: 0 8px 8px 0; /* Some gutter */
}

This solution is pretty limited as a max-height value is required as the items are essentially wrapping column to column. However, a simple-ish fix is to add javascript that calculates the height of the items. Various methods can be used to do this.

CSS - How do you create floating elements in columns?

1 Answers1