MM Masonry Photo Gallery

Demo

Demo: CSS Grid + custom props

Config the column width and gap

Using css selector:

.mm-masonry {
  --_col-width: 240;
  --_gap: 8;
}

Or directly in the html tag:

<div class="mm-masonry" style="--_gap: 20">...</div>

Disable option

You can control the disable option by using the following css selector:

.mm-masonry {
  --_display: block; /* unset | flex | ...*/
  --_gap: 0; /* Or a value */
}

Using some JavaScript

CSS Grid + image load event

Set image dimensions when onload event in Javascript.

Demo: CSS Grid + image load event

CSS columns

The simplest way: with CSS Columns.

Demo: CSS columns