YuanUI pattern library

9 #Masonry Masonry

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Building masonry layouts with pure CSS.

As its class name indicates, .mansory-multicol is using CSS mutiple columns to achive the layout. In our example, it defaults to 3 columns, and does not responsive to fewer columns if the container gets narrower. But you can add a column-width property on the container to make it responsible.

We can also implement the horizontal masonry layout with Flexbox. Making a vertical flexbox masonry is possible, to do so, we have to give our container a fixed height then set the flex-direction to column. The problems is that we have to tweak the height of the container every time new items added to it. So we don't recommend this approach.

Works on

  • IE 10+
  • Firefox
  • Chrome
  • Safari
Example

Masonry laout with Multiple columns

1
2

3

4
5
6
7
8
9

Masonry laout with Multiple columns (no gutter)

1
2

3

4
5
6
7
8
9

Masonry laout with flexbox

1
2

3

4
5
6
7
8
9

Masonry laout with flexbox (no gutter)

1
2

3

4
5
6
7
8
9
Markup 
<h2>Masonry laout with Multiple columns</h2>
<div class="masonry-multicol">
  <div class="masonry-multicol__tile">
    <div class="masonry-multicol__tile-content">1</div>
  </div>
  <div class="masonry-multicol__tile">
    <div class="masonry-multicol__tile-content">2</div>
  </div>
  <div class="masonry-multicol__tile">
    <div class="masonry-multicol__tile-content">
      <p style="height: 200px;">3</p>
    </div>
  </div>
  <div class="masonry-multicol__tile">
    <div class="masonry-multicol__tile-content">4</div>
  </div>
  <div class="masonry-multicol__tile">
    <div class="masonry-multicol__tile-content">5</div>
  </div>
  <div class="masonry-multicol__tile">
    <div class="masonry-multicol__tile-content">6</div>
  </div>
  <div class="masonry-multicol__tile">
    <div class="masonry-multicol__tile-content">7</div>
  </div>
  <div class="masonry-multicol__tile">
    <div class="masonry-multicol__tile-content">8</div>
  </div>
  <div class="masonry-multicol__tile">
    <div class="masonry-multicol__tile-content">9</div>
  </div>
</div>
<h2>Masonry laout with Multiple columns (no gutter)</h2>
<div class="masonry-multicol masonry-multicol--nogutter">
  <div class="masonry-multicol__tile">
    <div class="masonry-multicol__tile-content">1</div>
  </div>
  <div class="masonry-multicol__tile">
    <div class="masonry-multicol__tile-content">2</div>
  </div>
  <div class="masonry-multicol__tile">
    <div class="masonry-multicol__tile-content">
      <p style="height: 200px;">3</p>
    </div>
  </div>
  <div class="masonry-multicol__tile">
    <div class="masonry-multicol__tile-content">4</div>
  </div>
  <div class="masonry-multicol__tile">
    <div class="masonry-multicol__tile-content">5</div>
  </div>
  <div class="masonry-multicol__tile">
    <div class="masonry-multicol__tile-content">6</div>
  </div>
  <div class="masonry-multicol__tile">
    <div class="masonry-multicol__tile-content">7</div>
  </div>
  <div class="masonry-multicol__tile">
    <div class="masonry-multicol__tile-content">8</div>
  </div>
  <div class="masonry-multicol__tile">
    <div class="masonry-multicol__tile-content">9</div>
  </div>
</div>
<h2>Masonry laout with flexbox</h2>
<div class="masonry-flexbox">
  <div class="masonry-flexbox__tile">
    <div class="masonry-flexbox__tile-content"><div style="width:130px;">1</div></div>
  </div>
  <div class="masonry-flexbox__tile">
    <div class="masonry-flexbox__tile-content"><div style="width:150px;">2</div></div>
  </div>
  <div class="masonry-flexbox__tile">
    <div class="masonry-flexbox__tile-content">
      <p style="height: 200px;">3</p>
    </div>
  </div>
  <div class="masonry-flexbox__tile">
    <div class="masonry-flexbox__tile-content"><div style="width:190px;">4</div></div>
  </div>
  <div class="masonry-flexbox__tile">
    <div class="masonry-flexbox__tile-content"><div style="width: 600px; height: 200px;">5</div></div>
  </div>
  <div class="masonry-flexbox__tile">
    <div class="masonry-flexbox__tile-content"><div style="width: 400px; height: 170px;">6</div></div>
  </div>
  <div class="masonry-flexbox__tile">
    <div class="masonry-flexbox__tile-content">7</div>
  </div>
  <div class="masonry-flexbox__tile">
    <div class="masonry-flexbox__tile-content">8</div>
  </div>
  <div class="masonry-flexbox__tile">
    <div class="masonry-flexbox__tile-content">9</div>
  </div>
</div>
<h2>Masonry laout with flexbox (no gutter)</h2>
<div class="masonry-flexbox masonry-flexbox--nogutter">
  <div class="masonry-flexbox__tile">
    <div class="masonry-flexbox__tile-content"><div style="width:130px;">1</div></div>
  </div>
  <div class="masonry-flexbox__tile">
    <div class="masonry-flexbox__tile-content"><div style="width:150px;">2</div></div>
  </div>
  <div class="masonry-flexbox__tile">
    <div class="masonry-flexbox__tile-content">
      <p style="height: 200px;">3</p>
    </div>
  </div>
  <div class="masonry-flexbox__tile">
    <div class="masonry-flexbox__tile-content"><div style="width:190px;">4</div></div>
  </div>
  <div class="masonry-flexbox__tile">
    <div class="masonry-flexbox__tile-content"><div style="width: 600px; height: 200px;">5</div></div>
  </div>
  <div class="masonry-flexbox__tile">
    <div class="masonry-flexbox__tile-content"><div style="width: 400px; height: 170px;">6</div></div>
  </div>
  <div class="masonry-flexbox__tile">
    <div class="masonry-flexbox__tile-content">7</div>
  </div>
  <div class="masonry-flexbox__tile">
    <div class="masonry-flexbox__tile-content">8</div>
  </div>
  <div class="masonry-flexbox__tile">
    <div class="masonry-flexbox__tile-content">9</div>
  </div>
</div>
Source: masonry.css, line 1