cssblock

CSS blocks side by side

Is that possible to do with CSS.

enter image description here

I tried this:

    #gallery_ul  {
        display: inline-block;
        list-style: none outside none;
        margin: auto auto auto auto;
        width: 986px;
    }

    #gallery_ul li {
        float:left;
        margin:10px;
        padding:10px;
        text-align:center;
        border:1px solid grey;
        width:274px;
    }

    #gallery_ul img {
        padding-bottom:5px;
    }

If yes then how? Thank you.

Solution

  • You can either do it with CSS-columns or with javascript. I would suggest javascript, unless you don't need to worry too much about browser support/quirks.

    See the masonry plugin for the most popular way to do so: http://masonry.desandro.com/