Find and fix web accessibility issues with ease using axe DevTools Pro. Try for free!
It’s not at the level of demand as, say, container queries, but being able to make “masonry” layouts in CSS has been a big ask for CSS developers for a long time. Masonry being that kind of layout where unevenly-sized elements are layed out in ragged rows. Sorta like a typical brick wall turned sideways.
The layout alone is achievable in CSS alone already, but with one big caveat: the items aren’t arranged in rows, they are arranged in columns, which is often a deal-breaker for folks.
The “messes with the order” example isn’t due to it being Flexbox or Masonry or anything. For some reason, the JS code just shuffles the order of the children (by giving them an order property value equal to their index mod 3). Note that it counts up 1, 4, 7, 10, 13, then back down to 2, 5, 8, 11, etc.
One of the main challenges of creating a masonry layout with flexbox is that to make an item affect the positioning of an item above and below it we need to change the flex-direction of the container to column, which makes items run from top to bottom. Masonry layouts are a great option for blogs, portfolios or even photo galleries. They look complicated, yet the style enables each item to stand out individually. Here’s a demonstration of how Flexbox can make a masonry layout even better. Quick demonstration of masonry grids done using CSS Flexbox properties, both horizontally and vertically. Flexbox Masonry — Horizontal. Horizontal Masonry Vertical Masonry. Read the Article.
An implementation of this proposal is now available in Firefox Nightly. It is disabled by default, so you need to load
about:config and set the preference
true to enable it (type “masonry” in the search box on that page and it will show you that pref).
Jen Simmons has created some demos already:
Is this really a grid?
A bit of pushback from Rachel Andrew…
Grid isn’t Masonry, because it’s a grid with strict rows and columns. If you take another look at the layout created by Masonry, we don’t have strict rows and columns. Typically we have defined rows, but the columns act more like a flex layout, or Multicol. The key difference between the layout you get with Multicol and a Masonry layout, is that in Multicol the items are displayed by column. Typically in a Masonry layout you want them displayed row-wise.
Speaking personally, I am not a huge fan of this being part of the Grid specification. It is certainly compelling at first glance, however I feel that this is a relatively specialist layout mode and actually isn’t a grid at all. It is more akin to flex layout than grid layout.
By placing this layout method into the Grid spec I worry that we then tie ourselves to needing to support the Masonry functionality with any other additions to Grid.
None of this is final yet, and there is active CSS Working Group discussion about it.
As Jen said:
This is an experimental implementation — being discussed as a possible CSS specification. It is NOT yet official, and likely will change. Do not write blog posts saying this is definitely a thing. It’s not a thing. Not yet. It’s an experiment. A prototype. If you have thoughts, chime in at the CSSWG.
Last time there was chatter about native masonry, it was mingled with idea that the CSS Layout API, as part of Houdini, could do this. That is a thing, as you can see by opening this demo (repo) in Chrome Canary.
I’m not totally up to speed on whether Houdini is intended to be a thing so that ideas like this can be prototyped in the browser and ultimately moved out of Houdini, or if the ideas should just stay in Houdini, or what.
The only css grid package you will ever need.
Three grid systems in one package! Each is fully responsive and mobile ready. Each grid is optional via setting up a config.
Grid Systems Included:
- Flexbox Grid System
- CSS Grid system
- Flexbox Masonry Grid System
Add to your package.json:
Add to your SCSS:
Add to your bower.json:
Add to your SCSS:
All breakpoints are set from settings map.
All alignment, distribution, and recordering classes are automatically imported.To create flexbox column classes set
flexbox-columns-active to true in
Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here’s how the grid system works:
Rows must be placed within a
.container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.Predefined grid classes like .row and
.col-xs-4 are available for quickly making grid layouts.Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on
The negative margin is why the examples below are outdented. It’s so that content within grid columns is lined up with non-grid content.Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three
.col-xs-4.If more than
12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any
.col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a
.col-lg-* class is not present.
Modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.
Percent based widths allow fluid resizing of columns and rows.
Offset a column
Add any number of auto sizing columns to a row. Let the grid figure it out.
Nest grids inside grids inside grids.
Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column
Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.
Add classes to distribute the contents of a row or column.
Add classes to reorder columns.
To create flexbox column classes set
create-masonry to true in
$user-defined-settings.To set the item and column gap set ` mas-item-padding
To use the masonry grid there is 2 components that must be used:
Flexbox Masonry Sealant
- You must wrap the grid with the class .masonry-row
- Next you must declare what column breakpoints are required, the breakpoints are created very similar to the flexbox grid with the only difference being the prefix mas- in front of the class name and the column number isent in reverese. For Example:
.mas-col-lg-3creates 3 column grid at the large breakpoint –≥ 1200px
CSS Grid System
Please note this still needs fully tested.
Classes are based off the main breakpoint map in the
$settingsEach set of classes uses the breakpoint suffix to declare size of grid similar to the flexbox grid. An example CSS grid class:
Basic markup for creating a single column in the row
A 2 column, 3 row layout:
Columns classes, based on a 12 column grid:
.full- *(12/12 Columns)
.one-half- *(6/12 Columns)
.two-thirds- *(8/12 Columns)
.one-third- *(4/12 Columns)
.one-fourth- *(3/12 Columns)
.one-sixth- *(2/12 Columns)
.one-twelfth- *(1/12 Columns)
Note: the classes must be used with the
.align-center-vert- *(Vertically center)
.align-center-horiz- *(Horizontally center)
.align-end-vert- *(Vertically align to bottom)
.align-end-horiz- *(Horizontally align to right)
Note: the classes must be used with the
.align-top- *(Align row to top)
.align-bottom- *(Align row to bottom)
Flexbox Masonry Row
Align the column to the middle of the layout.
Feature working with:
.one-half- .two-thirds- .one-third- .one-sixth- column classes
.align-middle- *(Centers column)
Flexbox Masonry Sealer
Flexbox Masonry Products
Flexbox Masonry Paint
.gridclass to your column.