MM Masonry Photo Gallery

!image

Demo

Demo: CSS Grid + custom props

Config the column width and gap

Using css selector:

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

Or directly in the html tag:

`html



`

Disable option

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

`css
.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