Flexbox Masonry

Posted onby admin

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.

If you want that ragged row thing and horizontal source order, you’re in JavaScript territory. Until now, that is, as Firefox rolled this out under a feature flag in Firefox Nightly, as part of CSS grid.

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.

Mats Palmgren:

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 layout.css.grid-template-masonry-value.enabled to 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.

Houdini?

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

Instillation:

NPM/YARN:

Add to your package.json:

Add to your SCSS:

Masonry

Bower

Add to your bower.json:

Add to your SCSS:

Example config

How To:

All breakpoints are set from settings map.

Flexbox

Setup

All alignment, distribution, and recordering classes are automatically imported.To create flexbox column classes set flexbox-columns-active to true in $user-defined-settings

Overview

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 .rows.

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.

Responsive

Modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.

Fluid

Percent based widths allow fluid resizing of columns and rows.

Offset a column

Flexbox masonry left to right

Auto Width

Add any number of auto sizing columns to a row. Let the grid figure it out.

Flexbox Masonry

Nested Grids

Nest grids inside grids inside grids.

Alignment

Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column

.start-

.center-

.end-

.top-

.middle-

.bottom-

Example Alignment

Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.

Distribution

Add classes to distribute the contents of a row or column.

.around-

.between-

Reordering

Add classes to reorder columns.

.first-

.last-

Reversing

.reverse

Masonry

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 and mas-column-gap in $user-defined-settings`.

Overview

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-3 creates 3 column grid at the large breakpoint –≥ 1200px

Example Markup

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: full-sm two-thirds-lg

Basic markup for creating a single column in the row

A 2 column, 3 row layout:

Columns

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)

Grid Alignment

Note: the classes must be used with the .grid class.

Flexbox Masonry

Example: grid align-center-vert-sm

  • .align-center-vert- * (Vertically center)
  • .align-center-horiz- * (Horizontally center)
  • .align-end-vert- * (Vertically align to bottom)
  • .align-end-horiz- * (Horizontally align to right)

Row Alignment

Note: the classes must be used with the .row class

  • .align-top- * (Align row to top)
  • .align-bottom- * (Align row to bottom)

Flexbox Masonry Row

Column Alignment

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

Nesting

Flexbox Masonry Products

Requirements:

Flexbox Masonry Paint

  • Add .grid class to your column.