CODEWITHSUNDEEP
htmlcss
Oleksandr Papchenko
Oleksandr Papchenko

Reputation: 2221

How to vertically align inline-blocks like in Pinterest?

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?

Upvotes: 2

Views: 1288

Answers (1)

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

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>

Upvotes: 2

Related Questions