https://github.com/darlanmendonca/masonry-css
Create mosaic grid, like masonry, with css only
https://github.com/darlanmendonca/masonry-css
css grid layout masonry
Last synced: 4 months ago
JSON representation
Create mosaic grid, like masonry, with css only
- Host: GitHub
- URL: https://github.com/darlanmendonca/masonry-css
- Owner: darlanmendonca
- Created: 2015-11-17T02:06:57.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2017-04-04T17:31:58.000Z (over 8 years ago)
- Last Synced: 2025-06-15T15:38:28.386Z (4 months ago)
- Topics: css, grid, layout, masonry
- Language: JavaScript
- Size: 10.6 MB
- Stars: 18
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# masonry-css
Responseive Masonry style grid, like masonry plugins, but with css only!
See [demo](https://rawgit.com/darlanmendonca/masonry-css/master/dist/index.html) - Illustrations by [Ken Wong](http://ken-wong.deviantart.com/)
### Install
Install using ```npm``` or ```bower```.
```sh
npm install --save masonry-css
``````sh
bower install --save masonry-css
```Refer to css with ```dist/masonry.css```, or ```src/masonry.scss'```. I.e.
```html
```
In your .html use class ```.masonry``` as container, and inside of that, each image need has the class ```.masonry-item```, example:
```html
![]()
![]()
![]()
![]()
```