Masonry
Class modifiers
| Class | Description |
|---|---|
masonry-gallery | Lets you size items with --item-width, as if you’re using grid-gallery. |
CSS Variables
| CSS Variable | Default | Description |
|---|---|---|
--gap-x | - | Gap between columns |
--gap-y | - | Gap between rows |
--gap | 1rlh | Gap between columms and rows. --gap-x and --gap-y will override this value. |
--cols | 1 | Number of columns |
--item-width | 3rem | Size of each column. Used in gallery-masonry only |
Children
CSS Variables
| CSS Variable | Default | Description |
|---|---|---|
--span | 1 | Number of columns that the child should occupy. |
Masonry Script
| Props | Default | Description |
|---|---|---|
selector | undefined | The container for the script. You can pass a selector or element into this value. When undefined, it defaults to document.body. |