How to vertically align inline-blocks like in Pinterest?

Question

By default, inline-blocks have vertical-align equal to baseline. From this question I understand what is the baseline.

But I don't get how here from this question, inline-blocks are aligned like in Pinterest gallery?

Seems that column-gap and column-width made the deal. But how? We have not changed default vertical-align of inline-blocks?

What is exactly your question? How they made the masonry layout? Do you want to make a masonry layout and got stacked? — Bojan Petkovski, Oct 22 '14 at 13:05
i just want to understand why in this case inline-blocks are aligned in masonry way. — Oleksandr Papchenko, Oct 22 '14 at 13:07
These are not inline-block elements. They are block level elements with a masonry layout, and has nothing to do with vertical alignment. To achieve that, you will either have to rely on [CSS3 columns](http://css-tricks.com/guide-responsive-friendly-css-columns/), or go for a JS-based solution like [Masonry](http://masonry.desandro.com/) or [Isotope](https://www.google.dk/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0CCIQFjAA&url=http%3A%2F%2Fisotope.metafizzy.co%2F&ei=hK1HVKfkDYP1O-nUgPAB&usg=AFQjCNHzbG2dSuid3yQGg-80of_sFMnasw&sig2=ZYQXl9caz5SwjKj-E_66Fw&bvm=bv.77880786,d.ZWU). — Terry, Oct 22 '14 at 13:12
Flexbox may also be a solution: http://jsfiddle.net/0cazLz2z/1/ — Nico O, Oct 22 '14 at 13:22
Learnt enough for today in the above three comments.. Thank you guys :) — Mr_Green, Oct 22 '14 at 13:25

score 2 · Accepted Answer · answered Oct 22 '14 at 13:29

In the example they are using column-width to specify what will be the width of the created column and then leave up to the browser to decide how many columns will it create. Then it splits the items in those columns and orders them starting from first column downwards and then to the next column from top - down and so on. The column-gap is just used to add space between the created columns.

And yes the .items are inline-block elements but they are just stacked on top of each other. Their alignment has nothing to do with vertical-align.

You can also specify the number of columns that you want the content to spread in with column-count .

I have made an example using numbers in the divs for you to see how the ordering works with column-width :)

*,
*:before,
*:after {
  box-sizing: border-box !important;
}
.row {
  -moz-column-width: 18em;
  -webkit-column-width: 18em;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
}
.item {
  display: inline-block;
  padding: .25rem;
  width: 100%;
}
.well {
  position: relative;
  display: block;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />



<div class="container">
  <div class="row">
    <div class="item">
      <div class="well">1</div>
    </div>
    <div class="item">
      <div class="well">2</div>
    </div>
    <div class="item">
      <div class="well">3</div>
    </div>
    <div class="item">
      <div class="well">4</div>
    </div>
    <div class="item">
      <div class="well">5</div>
    </div>
    <div class="item">
      <div class="well">6</div>
    </div>
    <div class="item">
      <div class="well">7</div>
    </div>
    <div class="item">
      <div class="well">8</div>
    </div>
    <div class="item">
      <div class="well">9</div>
    </div>
    <div class="item">
      <div class="well">10</div>
    </div>
  </div>
</div>

How to vertically align inline-blocks like in Pinterest?

1 Answers1