Minimalist Masonry Gallery Layout With CSS Grid – mm-masonry.css

Category: Javascript , Layout | July 16, 2022
Views Total:3,755 views
Official Page:Go to website
Last Update:July 16, 2022


Minimalist Masonry Gallery Layout With CSS Grid – mm-masonry.css


mm-masonry.css is a CSS library that makes use of CSS Grid to create flexible, fluid, Masonry-style image grids similar to Pinterest and Tumblr layouts.

How to use it:

1. Download and import the mm-masonry.css.

<link href="mm-masonry.css" rel="stylesheet" />
2. The required HTML structure for the masonry gallery layout.
<div class="mm-masonry" id="mm-masonry">
  <div class="mm-masonry__item" style="--w: 500; --h: 400">
    <img class="mm-masonry__img" src="1.jpg" />
  <div class="mm-masonry__item" style="--w: 300; --h: 350">
    <img class="mm-masonry__img" src="2.jpg" />
  <div class="mm-masonry__item" style="--w: 500; --h: 450">
    <img class="mm-masonry__img" src="3.jpg" />
  <div class="mm-masonry__item" style="--w: 200; --h: 300">
    <img class="mm-masonry__img" src="4.jpg" />
  <div class="mm-masonry__item" style="--w: 400; --h: 200">
    <img class="mm-masonry__img" src="5.jpg" />

3. Customize the layout by override the default CSS variables.

.mm-masonry {
  --_col-width: 240;
  --_gap: 8;
// OR
<div class="mm-masonry" style="--_gap: 20">

See Also:



  • Additional config and disable option

You Might Be Interested In:

Leave a Reply