colcade - Lightweight masonry layout

  •        31

Masonry is great, but it has grown big as it has grown older. Colcade is designed to be small & fast. I recommend using Colcade over Masonry, but read over this feature comparison. Colcade works by moving item elements into column elements.



Related Projects

react-native-masonry - :raised_hands: A pure JS react-native component to render a masonry~ish layout for images with support for dynamic columns, progressive image loading, device rotation, on-press handlers, and headers/captions

  •    Javascript

"Bricks" are the basic building block of the masonry and are passed into the props.bricks. They essentially represent the items within each column and require a uri property at a minimum. However, you can freely add additional properties to the data property if you need access to certain data within your brick.onPress handler and footer/header renderer. The following properties are available.

Masonry - Harness the power of AutoLayout NSLayoutConstraints with a simplified, chainable and expressive syntax

  •    Objective-C

Masonry is still actively maintained, we are committed to fixing bugs and merging good quality PRs from the wider community. However if you're using Swift in your project, we recommend using SnapKit as it provides better type safety with a simpler API. Masonry is a light-weight layout framework which wraps AutoLayout with a nicer syntax. Masonry has its own layout DSL which provides a chainable way of describing your NSLayoutConstraints which results in layout code that is more concise and readable. Masonry supports iOS and Mac OS X.

driveway - pure CSS masonry layouts

  •    HTML

driveway is an explorative project for developing pure CSS masonry layouts. It is developed using stylus. You may have come here from the blog post I wrote about pure CSS masonry layouts. If that's the case and you want the exact code I used in that post(with vendor prefixing), you'll be best served looking in the dist folder for and Alternatively, use bower to pull in the repo.

vanilla-masonry - Masonry layouts without any frameworks

  •    Javascript

Masonry layouts without any frameworks

masonry-rails - JQuery Masonry ready for use with Rails asset pipeline

  •    HTML

JQuery Masonry ready for use with Rails asset pipeline

salvattore - A jQuery Masonry alternative with CSS-driven configuration.

  •    Javascript

Salvattore is a library agnostic JS script that will help you organize your HTML elements according to the number of columns you specify, like jQuery Masonry. To find out more and see it in action, please visit our website.

AutolayoutExampleWithMasonry - Different Autolayout examples with Masonry

  •    Objective-C

Different Autolayout examples with Masonry. 用Masonry写的Autolayout案例,持续更新中。详细解答请看

react-masonry-component - A React.js component for using @desandro's Masonry

  •    Javascript

if you wish to have IE8 support, v2 with React 0.14 is the highest version available. To use the component just require the module.

Auto Masonry

  •    Python

A Blender python script which automatically creates masonry and stonework. Think castles and cobblestone streets! v0.56 is usable and available at the Download page. Current version supports windows, doors, radial, and domes.

angular-masonry - An AngularJS directive for Masonry.

  •    CoffeeScript

An AngularJS 1 directive to work with David Desandro's Masonry.Add wu.masonry to your application's module dependencies.

masonry - :love_hotel: Cascading grid layout library

  •    HTML

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 for complete docs and demos.

angular-deckgrid - A lightweight masonry-like grid for AngularJS.

  •    Javascript

A lightweight masonry-like grid for AngularJS. Include angular-deckgrid in your HTML.

angulargrid - Pinterest like responsive masonry grid system for angular

  •    Javascript

agular-grid-id and angular-grid-options deprecated, use ag-id and ag-options instead.

mauerwerk - ⚒ A react-spring driven masonry-like grid with enter/exit and shared element transitions

  •    Javascript

These two would work outside the Grids context if you wanted to use them elsewhere. mauerwerk depends on react-spring and react-measure.

BigShow1949 - iOS教学/各类知识点总结:运行时/贝塞尔曲线/水纹/粒子发射器/核心动画/渐变色/网络请求/按钮/标签/视图布局/视图效果/文字视图/表情键盘/旋转动画/2048/网易/微信/猿题库/阿里巴巴/设计模式/数据持久化/多次点击按钮/微信注册按钮/展开按钮/跑马灯/闪烁文字/球形滚动标签/自动布局标签/快播动态标签/水平滚动布局/瀑布流布局/浏览卡/半圆布局/滑动标题/抽卡效果/百度视图切换/领英动画/折卡效果/卡牌拖动翻页/滚动悬浮视图/侧滑形变效果/评分条/打印机特效/Masonry/生命周期/响应者链条/引导页/通知中心/抖动密码框/余额宝数字跳动/UIDynamic/碰撞行为/捕捉行为/推动行为/附着行为/动力元素行为/GCD/KVC&KVO/多继承/消息转发/二维码/MVC/MVP/MVVM/Router

  •    Objective-C


chrome-tabs - Chrome-style tabs in HTML/CSS.

  •    CSS

Exactly what you think this is. Go wild. Drag-and-drop support provided by Draggabilly by @desandro.


  •    Javascript

An exquisite jQuery plugin for magical layouts. Enables filtering, sorting, and dynamic layouts.

masonry - Layout elements in a grid, like a mason fitting stones in a wall

  •    Javascript

Layout elements in a grid, like a mason fitting stones in a wall

isotope - :revolving_hearts: Filter & sort magical layouts

  •    HTML

See for complete docs and demos.Link directly to Isotope files on unpkg.

packery - :bento: Gapless, draggable grid layouts

  •    Javascript

Link directly to Packery files on unpkg.If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Packery under the terms of the GPLv3.