https://github.com/manumorante/mm-masonry
pure css masonry experiments
https://github.com/manumorante/mm-masonry
css custom-properties masonry
Last synced: 6 months ago
JSON representation
pure css masonry experiments
- Host: GitHub
- URL: https://github.com/manumorante/mm-masonry
- Owner: manumorante
- Created: 2022-05-22T00:21:02.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2025-02-08T22:53:11.000Z (over 1 year ago)
- Last Synced: 2025-08-09T10:58:48.571Z (11 months ago)
- Topics: css, custom-properties, masonry
- Language: HTML
- Homepage: https://masonry.manumorante.com
- Size: 544 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Masonry Photo Gallery
## NPM package
[npmjs.com/package/mm-masonry](https://www.npmjs.com/package/mm-masonry)
## Demo
[Demo: CSS Grid + custom props](https://masonry.manumorante.com/web/01-css-grid-custom-props.html)
## 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](https://masonry.manumorante.com/web/02-css-grid-js-load.html)
## CSS columns
The simplest way: with CSS Columns.
[Demo: CSS columns](https://masonry.manumorante.com/web/03-css-colums.html)