Google AMP Masonry Layout

Documentation and examples for css masonry: Google AMP Masonry Layout.

Google AMP CSS Masonry

Responsive CSS Masonry

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="masonry">
        <div class="brick padding">
          <div class="brick-content"></div>
        </div>
        <div class="brick padding">
          <div class="brick-content brick-content-large"></div>
        </div>
        <div class="brick padding">
          <div class="brick-content brick-content-medium"></div>
        </div>
        <div class="brick padding">
          <div class="brick-content brick-content-small"></div>
        </div>
        <div class="brick padding">
          <div class="brick-content"></div>
        </div>
        <div class="brick padding">
          <div class="brick-content brick-content-small"></div>
        </div>
        <div class="brick padding">
          <div class="brick-content brick-content-large"></div>
        </div>
        <div class="brick padding">
          <div class="brick-content brick-content-medium"></div>
        </div>
        <div class="brick padding">
          <div class="brick-content"></div>
        </div>
        <div class="brick padding">
          <div class="brick-content brick-content-small"></div>
        </div>
        <div class="brick padding">
          <div class="brick-content brick-content-large"></div>
        </div>
        <div class="brick padding">
          <div class="brick-content brick-content-small"></div>
        </div>
        <div class="brick padding">
          <div class="brick-content brick-content-small"></div>
        </div>
        <div class="brick padding">
          <div class="brick-content brick-content-large"></div>
        </div>
        <div class="brick padding">
          <div class="brick-content brick-content-medium"></div>
        </div>
        <div class="brick padding">
          <div class="brick-content"></div>
        </div>
      </div>
    </div>
  </div>
</div>