Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
---|---|---|---|---|---|---|---|---|---|---|
Masonry | 15,477 | 1,999 | 186 | 2 years ago | 13 | July 04, 2018 | 50 | HTML | ||
:love_hotel: Cascading grid layout plugin | ||||||||||
Dashboards | 10,892 | 2 | 1 | 2 years ago | 4 | April 08, 2019 | 2 | mit | HTML | |
Responsive dashboard templates 📊✨ | ||||||||||
Muuri | 10,363 | 22 | 18 | a month ago | 22 | July 09, 2021 | 100 | mit | JavaScript | |
Infinite responsive, sortable, filterable and draggable layouts | ||||||||||
Rebass | 7,890 | 744 | 282 | 4 months ago | 109 | October 28, 2019 | 96 | mit | JavaScript | |
:atom_symbol: React primitive UI components built with styled-system. | ||||||||||
Vue Grid Layout | 6,383 | 104 | 154 | 3 days ago | 42 | August 03, 2022 | 224 | mit | JavaScript | |
A draggable and resizable grid layout, for Vue.js. | ||||||||||
Flex Layout | 5,917 | 5,089 | 934 | a month ago | 41 | June 30, 2022 | 50 | mit | TypeScript | |
Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API | ||||||||||
Split | 5,630 | 248 | 132 | 3 months ago | 43 | January 07, 2022 | 158 | mit | JavaScript | |
Unopinionated utilities for resizeable split views | ||||||||||
Twoway View | 5,299 | 89 | 6 years ago | 5 | October 30, 2014 | 168 | Java | |||
[DEPRECATED] RecyclerView made simple | ||||||||||
Cssgridgenerator | 4,577 | 3 months ago | 39 | mit | Vue | |||||
🧮 Generate basic CSS Grid code to make dynamic layouts! | ||||||||||
Awesome Styled Components | 3,149 | 4 months ago | 9 | |||||||
A curated list of awesome styled-components resources 💅 |
Cascading grid layout library
Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.
See masonry.desandro.com for complete docs and demos.
Link directly to Masonry files on unpkg.
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script>
npm: npm install masonry-layout --save
Bower: bower install masonry-layout --save
Masonry has been actively maintained and improved upon for 8 years, with 900 GitHub issues closed. Please consider supporting its development by purchasing a license for one of Metafizzy's commercial libraries.
With jQuery
$('.grid').masonry({
// options...
itemSelector: '.grid-item',
columnWidth: 200
});
With vanilla JavaScript
// vanilla JS
// init with element
var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {
// options...
itemSelector: '.grid-item',
columnWidth: 200
});
// init with selector
var msnry = new Masonry( '.grid', {
// options...
});
With HTML
Add a data-masonry
attribute to your element. Options can be set in JSON in the value.
<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
<div class="grid-item"></div>
<div class="grid-item"></div>
...
</div>
Masonry is released under the MIT license. Have at it.
Made by David DeSandro