Question

I’m looking to render a multi-column CSS layout like the one pictured in the link below.

https://i.stack.imgur.com/QQSTb.png

Here’s the kind of syntax I’m looking for…

<div class="container">
  <div id="1">#1</div>
  <div id="2">#2</div>
  <div id="3">#3</div>
     <!-- and so on... -->
</div>

What kind of CSS properties am I looking to apply to these numbered DIVs to get them displaying like this? Height of DIVs is variable but width is fixed.

Many Thanks!

Answer 1

It can’t be done well with just CSS, and only with CSS3.

To answer your question as posted, this is an example: http://sickdesigner.com/masonry-css-getting-awesome-with-css3/

div{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 480px; }

div a{
    display: inline-block; /* Display inline-block, and absolutely NO FLOATS! */
    margin-bottom: 20px;
    width: 100%; }

<div>
<a href="#">Whatever stuff you want to put in here.</a>
<a href="#">Whatever stuff you want to put in here.</a>
<a href="#">Whatever stuff you want to put in here.</a>
...and so on and so forth ad nauseum.
</div>

The issue with that is that if you have a lot of items, you’ll see the first of each column at the top instead of the first three items.

The jQuery masonry plugin is a much better option for this kind of layout: http://masonry.desandro.com/

There’s also a plain JS version, called “vanilla masonry”
http://vanilla-masonry.desandro.com/

That way your first items are on the top, it looks better in order.