CSS-only masonry layout

by

2021 Update

CSS Grid Layout Level 3 includes a masonry feature.

Code will look like this:

grid-template-rows: masonry
grid-template-columns: masonry

As of March 2021, it’s only available in Firefox (after activating the flag).

end update; original answer below

Flexbox

A dynamic masonry layout is not possible with flexbox, at least not in a clean and efficient way.

Flexbox is a one-dimensional layout system. This means it can align items along horizontal OR vertical lines. A flex item is confined to its row or column.

A true grid system is two-dimensional, meaning it can align items along horizontal AND vertical lines. Content items can span across rows and columns simultaneously, which flex items cannot do.

This is why flexbox has a limited capacity for building grids. It’s also a reason why the W3C has developed another CSS3 technology, Grid Layout.

row wrap

In a flex container with flex-flow: row wrap, flex items must wrap to new rows.

This means that a flex item cannot wrap under another item in the same row.

Notice above how div #3 wraps below div #1, creating a new row. It cannot wrap beneath div #2.

As a result, when items aren’t the tallest in the row, white space remains, creating unsightly gaps.

column wrap

If you switch to flex-flow: column wrap, a grid-like layout is more attainable. However, a column-direction container has four potential problems right off the bat:

  1. Flex items flow vertically, not horizontally (like you need in this case).
  2. The container expands horizontally, not vertically (like the Pinterest layout).
  3. It requires the container to have a fixed height, so the items know where to wrap.
  4. As of this writing, it has a deficiency in all major browsers where the container doesn’t expand to accommodate additional columns.

As a result, a column-direction container is not an option in this case, and in many other cases.

CSS Grid with item dimensions undefined

Grid Layout would be a perfect solution to your problem if the various heights of the content items could be pre-determined. All other requirements are well within Grid’s capacity.

The width and height of grid items must be known in order to close gaps with surrounding items.

So Grid, which is the best CSS has to offer for building a horizontally-flowing masonry layout, falls short in this case.

In fact, until a CSS technology arrives with the ability to automatically close the gaps, CSS in general has no solution. Something like this would probably require reflowing the document, so I’m not sure how useful or efficient it would be.

You’ll need a script.

JavaScript solutions tend to use absolute positioning, which removes content items from the document flow in order to re-arrange them with no gaps. Here are two examples:

Masonry is a JavaScript grid layout library. It
works by placing elements in optimal position based on available
vertical space, sort of like a mason fitting stones in a wall.

source: http://masonry.desandro.com/

[Pinterest] really is a cool site, but what I find interesting is how these pinboards are laid out… So the purpose of this tutorial is to re-create this responsive block effect ourselves…

source: https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html

CSS Grid with item dimensions defined

For layouts where the width and height of content items are known, here’s a horizontally-flowing masonry layout in pure CSS:

grid-container {
  display: grid;                                                /* 1 */
  grid-auto-rows: 50px;                                         /* 2 */
  grid-gap: 10px;                                               /* 3 */
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));   /* 4 */
}

[short] {
  grid-row: span 1;                                             /* 5 */
  background-color: green;
}

[tall] {
  grid-row: span 2;
  background-color: crimson;
}

[taller] {
  grid-row: span 3;
  background-color: blue;
}

[tallest] {
  grid-row: span 4;
  background-color: gray;
}

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
  font-weight: bold;
  color: white;
}
<grid-container>
  <grid-item short>01</grid-item>
  <grid-item short>02</grid-item>
  <grid-item tall>03</grid-item>
  <grid-item tall>04</grid-item>
  <grid-item short>05</grid-item>
  <grid-item taller>06</grid-item>
  <grid-item short>07</grid-item>
  <grid-item tallest>08</grid-item>
  <grid-item tall>09</grid-item>
  <grid-item short>10</grid-item>
  <grid-item tallest>etc.</grid-item>
  <grid-item tall></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
</grid-container>

jsFiddle demo

How it works

  1. Establish a block-level grid container. (inline-grid would be the other option)
  2. The grid-auto-rows property sets the height of automatically generated rows. In this grid each row is 50px tall.
  3. The grid-gap property is a shorthand for grid-column-gap and grid-row-gap. This rule sets a 10px gap between grid items. (It doesn’t apply to the area between items and the container.)
  4. The grid-template-columns property sets the width of explicitly defined columns.

The repeat notation defines a pattern of repeating columns (or rows).

The auto-fill function tells the grid to line up as many columns (or rows) as possible without overflowing the container. (This can create a similar behavior to flex layout’s flex-wrap: wrap.)

The minmax() function sets a minimum and maximum size range for each column (or row). In the code above, the width of each column will be a minimum of 30% of the container and maximum of whatever free space is available.

The fr unit represents a fraction of the free space in the grid container. It’s comparable to flexbox’s flex-grow property.

  1. With grid-row and span we’re telling grid items how many rows they should span across.

Browser Support for CSS Grid

  • Chrome – full support as of March 8, 2017 (version 57)
  • Firefox – full support as of March 6, 2017 (version 52)
  • Safari – full support as of March 26, 2017 (version 10.1)
  • Edge – full support as of October 16, 2017 (version 16)
  • IE11 – no support for current spec; supports obsolete version

Here’s the complete picture: http://caniuse.com/#search=grid

Cool grid overlay feature in Firefox

In Firefox dev tools, when you inspect the grid container, there is a tiny grid icon in the CSS declaration. On click it displays an outline of your grid on the page.

More details here: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

More Related Contents:

  1. Flex / Grid layouts not working on button or fieldset elements
  2. Center and bottom-align flex items
  3. Last margin / padding collapsing in flexbox / grid layout
  4. Make grid container fill columns not rows
  5. Equal width flex items even after they wrap
  6. How to center elements on the last row in CSS Grid?
  7. CSS grid – maximum number of columns without media queries
  8. All widths set to width of widest element
  9. Make flex items overlap
  10. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  11. How can I create a row-based masonry layout using CSS?
  12. What are the default values for justify-content & align content?
  13. How do I use display:flex and justify-content:space-between, where the flex-item gets centered if there is only one of them?
  14. How to place elements like this
  15. Flexbox code working on all browsers except Safari. Why?
  16. One flex/grid item sets the size limit for siblings
  17. How to center a flex container but left-align flex items
  18. Left column and stacked right column using flexbox CSS [duplicate]
  19. flex property not working in IE
  20. Change div order with CSS depending on device-width
  21. input / button elements not shrinking in a flex container
  22. Flexbox and Internet Explorer 11 (display:flex in ?)
  23. Removing margin from flex items when they wrap
  24. Calculator keypad layout with flexbox
  25. Flex item should align left, not center, when it wraps
  26. Why isn’t position:sticky with left:0 working inside a scrollable container?
  27. How can I target a specific column or row in a CSS grid layout?
  28. Flexbox with fixed header and footer and scrollable content
  29. sticky position on css grid items
  30. Sizing flex items on the last row

Leave a Comment