CSS Grid Masonry Example
Thomas Mak wrote at 2020-11-11.
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.