CSS Grid Masonry Example

Thomas Mak wrote at 2020-11-11.

#css #css-grid

Screenshot (73).jpg 216 KB


CSS

ul.block-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));    
  grid-gap: 3px;
}
@supports (grid-template-rows: masonry) {
  ul.block-grid {
    grid-template-rows: masonry;
  }  
}

HTML


<ul class="block-grid">
  <li>
    <img src="https://placekitten.com/300/500" alt="placeholder image">
  </li>
  <!-- More placeholder images -->
  <li>
    <img src="https://placekitten.com/300/400" alt="placeholder image">
  </li>
</ul>

Currently, it is supported in Firefox Nightly build.

Code example:

https://codepen.io/makzan/pen/VwjVydm

Comments

no comments yet.