Masonry grid layout css

Masonry layout

Level 3 of the CSS grid layout specification includes a masonry value for grid-template-columns and grid-template-rows . This guide details what masonry layout is and how to use it.

Warning: This feature is only implemented in Firefox, and can be enabled by setting the flag layout.css.grid-template-masonry-value.enabled to true in about:config , in order to allow testing and providing of feedback.

Masonry layout is a layout method where one axis uses a typical strict grid layout, most often columns, and the other a masonry layout. On the masonry axis, rather than sticking to a strict grid with gaps being left after shorter items, the items in the following row rise up to completely fill the gaps.

Creating a masonry layout

To create the most common masonry layout, your columns will be the grid axis and the rows the masonry axis. Define this layout with grid-template-columns and grid-template-rows :

.container  display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-template-rows: masonry; > 

The child elements of this container will now lay out item by item along the rows, as they would with regular grid layout automatic placement. However, as they move onto a new row the items will display according to the masonry algorithm. Items will load into the column with the most room causing a tightly packed layout without strict row tracks.

It is also possible to create a masonry layout with items loading into rows.

Controlling the grid axis

On the grid axis, things will work just as you expect them to in grid layout. You can cause items to span multiple tracks while remaining in auto-placement, using the span keyword. Items may also be positioned using line-based positioning.

Masonry layout with spanning items

In this example two of the items span two tracks, and the masonry items work around them.

This example includes an item which has positioning for columns. Items with definite placement are placed before the masonry layout happens.

Controlling the masonry axis

The masonry axis operates under different rules as it is following the masonry layout rules rather than normal grid auto-placement rules. To control this axis we have three additional properties defined in the Grid Level 3 specification align-tracks , justify-tracks , and masonry-auto-flow .

masonry-auto-flow

The masonry-auto-flow property gives you a way to change how the masonry algorithm behaves. Give it a value of next and items will display in order on the grid axis, rather than going into whichever track has the most free space. The value positioned will ignore items with definite placement and place items in order-modified document order.

align-tracks

The align-tracks property allows for the alignment of items in grid containers with masonry in their block axis. The property aligns the items within their track, much in the way flex layout works. The property takes the same values as align-content , however you can specify multiple values to have different alignment values per track on the grid axis.

If you specify more values than tracks the additional values are ignored. If there are more tracks than values any additional tracks will use the last specified value.

justify-tracks

The justify-tracks property works in the same way as align-tracks, however it is used when the masonry axis is the inline axis.

Fallback

In browsers that do not support masonry, regular grid auto-placement will be used instead.

See also

Found a content problem with this page?

This page was last modified on May 29, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Native CSS Masonry Layout In CSS Grid

There is now a specification for native CSS masonry layout, as part of the Grid Layout spec. In this article, Rachel Andrew explains how it works with the help of a couple of demos you can try out in Firefox Nightly.

A Level 3 of the CSS Grid specification has been published as an Editor’s Draft, this level describes a way to do Masonry layout in CSS. In this article, I’ll explain the draft spec, with examples that you can try out in Firefox Nightly. While this is a feature you won’t be able to use in production right now, your feedback would be valuable to help make sure it serves the requirements that you have for this kind of layout. So let’s take a look.

What Is A Masonry Layout?

A masonry layout is one where items are laid out one after the other in the inline direction. When they move onto the next line, items will move up into any gaps left by shorter items in the first line. It’s similar to a grid layout with auto-placement, but without sticking to a strict grid for the rows.

The most well-known example of masonry is on Pinterest, and you will sometimes hear people refer to the layout as a “Pinterest layout”.

There are a number of JavaScript tools to help you create this kind of layout, such as David DeSandro’s Masonry plugin.

Can’t We Already Do This In CSS?

We can come close to a masonry layout in a couple of ways. The closest way to achieve the look of this type of layout is to use Multi-column Layout. In the example below, you see something which looks visually like a masonry layout. However, the order of the boxes runs down the columns. Therefore, if the first items have the highest priority (e.g. if this were search results), then the apparent first items in the top row aren’t actually the ones that came back first.

That’s all you need to do to get a simple masonry layout. Using Firefox, you can see that in the CodePen example below.

Note: You can use any of the values used for align-content for align-tracks and justify-tracks . There are some nice examples in the spec of different combinations.

If you set align-tracks: stretch , then any auto-sized items in the layout will stretch. The masonry effect is retained, but anything with a definite size on that axis will not be stretched out of shape.

Источник

Approaches for a CSS Masonry Layout

Masonry layout, on the web, is when items of an uneven size are laid out such that there aren’t uneven gaps. I would guess the term was coined (or at least popularized) for the web by David DeSandro because of his popular Masonry JavaScript library, which has been around since 2010. JavaScript library. Nothing against JavaScript, but it’s understandable we might not want to lean on it for doing layout. Is there anything we can do in CSS directly these days? Sorta.

Is vertical order with ragged bottoms OK?

Flexbox can do vertical columns with ragged endings too

But it’s not quite as clever, because you’ll need to set a height of some kind to get it to wrap the columns. You’ll also have to be explicit about widths rather than having it decide columns for you. But it’s doable and it does auto space the gaps if there is room.

Do you need a clean bottom edge? A Flexbox/JavaScript combo can help.

Jamie Perkins originally wrote this, then Janosh Riebesell re-wrote it and, now I’m porting it here. It totally messes with the order and requires the children to be flexy about their height, but it does the trick:

Is horizontal line masonry OK?

If it’s just the uneven brick-like look you’re after, then horizontal masonry is way easier. You could probably even float stuff if you don’t care about the ragged edge. If you wanna keep it a block… flexbox with allowed flex-grow is the ticket.

You’d think CSS grid could help

CSS grid is very amazing and useful in a CSS developer’s everyday life, but it’s not really designed for masonry style layouts. CSS grid is about defining lines and placing things along those lines, where masonry is about letting elements end where they may, but still exerting some positional influence. Balázs Sziklai has a nice example of auto-flowing grids that all stack together nicely, with pretty good horiziontal ordering:

Grid + JavaScript-manipulated row spans

Andy Barefoot wrote up a great guide. The trick is setting up repeating grid rows that are fairly short, letting the elements fall into the grid horizontally as they may, then adjusting their heights to match the grid with some fairly light math to calculate how many rows they should span.

Order-shifted elements in a Flexbox layout

Normally when you think of using order to move things around in a flexbox or grid layout, you’re in dangerous territory, as tab order will likely follow the DOM order, which no longer matches the expected tabbing order because visually things have moved all around. In this demo by Diederik van Leeuwen, order is used to make what starts out as a column-oriented flexbox but manipulated into being horizontally ordered with some clever JavaScript.

DOM-shifted elements in a CSS columns layout

What people generally want is column-stacking (varied heights on elements), but with horizontal ordering. That last grid demo above handles it pretty well, but it’s not the only way. Jesse Korzan tackled it with CSS columns. It needs JavaScript as well to get it done. In this case, it shifts the elements in the DOM to order them left-to-right while providing a horizontal stack using a CSS columns layout. This introduces a bit of an accessibility problem since the visual order (left-to-right) and source order (top-to-bottom) are super different & dash; though perhaps fixable with programmatic tabindex ?

There’s also the original library and variations

Houdini is broken up into different APIs that are all shipping at different times. The Paint and Typed OM APIs are the furthest along, but there is some support for the Layout API, which is incredibly exciting as it unlocks possibilities like masonry layout.flex-gro Here’s a demo from Google:

Источник