# mm-masonry

> Pure CSS Masonry like photo gallery

Latest version **1.0.9** (published 2022-10-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install mm-masonry
pnpm add mm-masonry
yarn add mm-masonry
bun add mm-masonry
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2022-10-24 |
| First published | 2022-05-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 542 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Manu Morante |
| Maintainers | manumorante |
| Keywords | masonry, photo-grallery, pure-css |

## Links

- npm: https://www.npmjs.com/package/mm-masonry
- Repository: https://github.com/manumorante/mm-masonry
- Homepage: https://masonry.manumorante.com
- Issues: https://github.com/manumorante/mm-masonry/issues
- npm.io page: https://npm.io/package/mm-masonry

## Recent versions

- 1.0.9 (latest) — 2022-10-24
- 1.0.8 — 2022-07-15
- 1.0.2 — 2022-05-28
- 1.0.1 — 2022-05-27
- 1.0.0 — 2022-05-27

## README

# MM Masonry Photo Gallery

![image](https://user-images.githubusercontent.com/3266486/170789547-9fcfa677-01b0-4347-9d6a-941cc34efd21.png)

## 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
<div class="mm-masonry" style="--_gap: 20">...</div>
```

## 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)

---
_Source: https://npm.io/package/mm-masonry · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._