Should Grid develop or stand aside for a new module? - Smashing Magazine

There were dueling suggestions that flowed around to add support to Layouts in Murstil in CSS. In one corner is a proposal that extends the existing CSS grid specification. In the second corner is another suggestion that sets masonry as an independent module. Well, not until recently. Now there are three suggestions with Apple Webkits “Item Flow” as the third option. The first two pages make strong points, and the third merges them into one that you all learn about in this article.

You have a Pinterest style layout to build, but you’re tired of JavaScript. Could CSS finally have the answer? For a beginner who looks at the pins on your Pinterest -page, you may be convinced that the CSSGitter layout is enough but not before you start building you are aware display: grid With additional adjustments is less than enough. In fact, Pinterest built its layout with JavaScript, but how cool would it be if it was just CSS? If there was a CSS display property that gave such a layout without further JavaScript, how amazing would it be?

Maybe there is. CSS -Gitter layout has one Experimental masonry value before grid-template-rows. The wall layout is an irregular, liquid grid. Irregular in the sense that instead of following a rigid grid pattern with space left after shorter pieces, the goods in the next row of a wall layout to fill the space of the masonry. It is the dream of portfolios, photo galleries and social feeds – designs that thrive with organic flow. But here is the catch: While this experimental feature exists (think Firefox nightly with a flag activated), it is not the seamless solution you might expect, thanks to limited browser support and some rough edges in its current form.

Maybe there is not. CSS lacks native masonry support and forces developers to use hacks or JavaScript libraries like Masonry.js. Developers with a good design background have expressed their criticism of the CSS network for masonry, where Rachel highlights it Masonry’s organic flow is in contrast to Grid’s strict two-dimensional structurePotentially confusing developers who expect grid -like behavior or Ahmad, shade how it makes the grid layout more complex than it should be, potentially overwhelming developers who value Grid’s clarity for structured layouts. Geoff also repeats Rachel Andrew’s concern for that “Teaching and learning networks to understand masonry behavior unnecessarily clumps two different formatting contexts in one,” Complicative training for designers and developers who are dependent on clear mental models.

There may be hope. The Apple Webkit team just jumped up a new competitor who not only claims to merge benefits of grids and masonry for a unified system briefly, but also includes Flexbox concepts. Imagine the best of three CSS layout systems in one.

Given these complaints and criticism – and a new guy in the game – the question is:

Should the CSS network expand to deal with masonry, or should a new, dedicated module take over or should item-flow Just take the reins?

The state of masonry in css today

Several developers have tried to create solutions to achieve a wall layout in their web applications using CSS grids with manual series-span hacks, CSS columns and Javascript libraries. Without native masonry, developers often turn to grid hacks like this: a grid-auto-rows Trick the paired with JavaScript to false current. It works – kind – but the cracks show quickly.

E.g. grid-row-end Dynamic, and use event listeners to adjust the layout by side load and window size.

/* HTML */

  
  
  
  Længere tekstindhold, der spænder over flere linjer for at vise højdevariation.

/* CSS */
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive columns */
  grid-auto-rows: 10px; /* Small row height for precise spanning */
  grid-auto-flow: column; /* Fills columns left-to-right */
  gap: 10px; /* Spacing between items */
}

.masonry-item {
  /* Ensure content doesn’t overflow */
  overflow: hidden;
}

.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
}

.masonry-item p {
  margin: 0;
  padding: 10px;
}

// JavaScript

function applyMasonry() {
  const grid = document.querySelector('.masonry-grid');
  const items = grid.querySelectorAll('.masonry-item');

  items.forEach(item => {
    // Reset any previous spans
    item.style.gridRowEnd = 'auto';

    // Calculate the number of rows to span based on item height
    const rowHeight = 10; 
    const gap = 10; 
    const itemHeight = item.getBoundingClientRect().height;
    const rowSpan = Math.ceil((itemHeight + gap) / (rowHeight + gap));

    // Apply the span
    item.style.gridRowEnd = `span ${rowSpan}`;
  });
}

// Run on load and resize
window.addEventListener('load', applyMasonry);
window.addEventListener('resize', applyMasonry);

This grid hack comes close to a masonryout – objects stack, holes filled, and it looks decent enough. But let’s be real: It’s not there yet. The code test above, as opposed to native grid-template-rows: masonry (which is experimental and only exists on Firefox Nightly), is dependent on JavaScript to calculate Spenn and defeat the “No JavaScript” dream. The Javascript logic works by recalculating tension on changing size or content change. As Chris Coyier noted in his criticism of similar hacks, this can lead to delay on complex pages.

The logical judgment -order may not match the visual stream, a concern Rachel Andrew generally raised about Murlayouts. Finally, if images are loaded slowly or content changes (such as Lazy-loaded media), the buckles need recalculation and risk layouthopp. It’s not really the ideal hack; I’m sure you’re agreeing.

Developers need a smooth experience, and ergonomically, Hacking Grid with scripts is a mental juggling. It forces you to switch between CSS and JavaScript to finish a layout. A native solution, whether it is grid or a new module, nails must be effortlessly responsive, nice reproduction and a workflow that doesn’t make you break your tools.

That is why this debate matters – our daily grinding requires it.

Option 1: Expansion of CSS -Net to Masonry

One way forward is to strengthen the CSS grille with masonry forces. From this writing, CSS grids have been expanded to accommodate masonry. grid-template-rows: masonry is a draft CSS grid level 3 that is currently experimental in Firefox nightly. The columns in this layout remain like a grid axis while the row takes masonry. The children’s elements are then laid out of goods along the ranks, which with the automatic location of the grating layout. With this layout, objects flow vertically, respecting column tracks, but not row restrictions.

This setting leaves the grid as your go-to-layout system, but allows it to handle the fluid, slit-filling stacks we ask for.

.masonry-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: masonry;
}

First, Grid-Svigner is based style on CSS Grid’s familiarity and robust tools (eg Devtools Support). As a front-end developer there is a chance that you have played with grid-template-columns or grid-areaSo you are halfway up the learning matrix. Masonry expands only the existing capabilities and eliminates the need to learn a whole new syntax from scratch. Grid’s robust tool also comes along with Chrome Devtools’ grid overlay or Firefox’s layout inspector who removes the need for JavaScript hacks.

Not so fast: There are restrictions. Grid’s specifications already include properties such as align-content and grid-auto-flow. Stacking of masonry on the list risks making it a maze.

Then there is Edge case. What happens when you want an item to span several columns and flow masonry style? Or when holes between objects are not across columns? The specifications are still fog here, and early tests suggest errors such as objects that jump unpredictably if the content is loaded dynamically. This problem can break layouts, especially on responsive design. The browser compatibility problem exists too. It is still experimental, and even with polyphills it does not work on other browsers except Firefox nightly. Not something you would like to try in your next client’s project, right?

Option 2: An independent mur module

What if we had a display: masonry approaching instead? Pamper me for a few minutes. This is not just wishful thinking. Early CSS working group chatters have floated the idea and it is worth depicting how it could improve layouts. Let’s dive down the vision, how It might work, and what It wins or loses in the process.

Imagine a layout system that does not lean on Grid’s stiff tracks or Flexbox’s linear flow, but instead thrives on vertical stacking with a horizontal twist. The target? A pure slate to Masonry’s signature appearance: objects that cascade into columns fill holes naturally, no hacks required. Inspired by mumbles in CSSWG Discharges and Chrome -Team’s Alternative Suggestions, this module would prioritize fluidity over structurewhich gives designers a tool that feels as intuitive as the layouts they hunt. Think Pinterest but without JavaScript scaffolding.

Here’s the track: a display the value of the value masonry Starts a flow -based system where items stabbed vertically by default, adjusting horizontal to fit the container. You would check the direction and distance with simple properties as follows:

.masonry {
  display: masonry;
  masonry-direction: column;
  gap: 1rem;
}

Want more control? Hypothetical extras such as masonry-columns: auto Could mimic grid repeat(auto-fill, minmax())while masonry-align: balance Can even smooth out column lengths for a polished look. It is less about precise location (Grid’s strength) and more about letting content breathe and flow, adaptation to whatever screen size thrown on it. The big victory here is a pure break from Grid’s stiff order. An independent module keeps them different: Grids to order, masonry for flow. No more wrestling with lattice properties that don’t quite fit; You get a system tailored to the job.

Of course, not all smooth sailing. A brand new spec means from zero. Browser suppliers should have to collect behind it, which can be slow. It can also lead to Confusion of choicewith developers who ask questions like: “Do I use grid or masonry for this gallery?” But hear me out: This proposed module may be muddy water before it clears them, but after the water is clear, it is safe for the use of everyone and miscellaneous.

Element Flow: A total layout resolution

In March 2025, Apple’s webkit team proposed VardErestrøm, a new system that unites concepts from Flexbox, Grid and Masonry for a single set of properties. Instead of flex-flow and grid-auto-flow with a card port called item-flow. This system introduces four long -handed properties:

item-direction
Checks flow direction (e.g. rowAt columnAt row-reverse).
item-wrap
Manage wrapping behavior (e.g. wrapAt nowrapAt wrap-reverse).
item-pack
Determines packing density (e.g. sparseAt denseAt balance).
item-slack
Adjusts tolerance for layout adjustments so items can shrink or switch to fit.

Element Flow aims to make masonry a natural result of these properties, not a separate function. For example, a wall layout could be obtained with:

.container {
  display: grid; /* or flex */
  item-flow: column wrap dense;

  /* long hand version */
  item-direction: column;
  item-wrap: wrap;
  item-pack: dense;

  gap: 1rem;
}

This setup allows items to flow vertically, wrapped in columns and packed tightly, mimics Masonry’s organic arrangement. The close packing option, inspired by grid auto-flow: densere -couples items to minimize holes while item-slack Could fine -tune the distance to visual balance.

Element Flow’s promise lies in its Wide use. It improves the grid and flexbox with features like nowrap to grid or balance Packing for Flexbox, addressing long -time developer’s wish lists. However, the proposal is still in discussion, and properties that item-slack Used naming debates due to clarity questions for non-native English speakers.

The disadvantage? Item flow is one Future -facing conceptAnd it has not yet been implemented in browsers from April 2025. Developers have to wait for standardization and adoption, and the CSS working group is still collecting feedback.

What is the right way?

While there is no direct answer to this question, the masonry debate hangs about balancing simplicity, performance and flexibility. Extension of the grid with masonry is tempting but risks Overcomplication an already robust system. An independent display: masonry Module gives clarity but adds to CSS’s learning curve. Element Flow, the latest competitor, suggests a unified system that could make masonry a natural expansion of grid and flexbox, which potentially sets the debate to rest in the end.

Each approach has trade -offs:

Grid with masonry: Well -known, but potentially clumsy, with accessibility and special concerns.
New module: Clean and custom built, but requires learning new syntax.
Product flow: Elegant and versatile, but not yet available with ongoing debates on naming and implementation.

Element Flow’s ability to improve existing layouts while supporting masonry makes it a compelling option, but its success depends on browser uptake and social support.

Conclusion

So where do we land after all this? The masonry exhibition boils down to three paths: the expansion of masonry in CSS -grid, an independent module for masonry or item stream. Now the question is, Will CSS finally free us from JavaScript to masonryor are we still dreaming?

Grid teases us with a taste and an independent modular whispering promises – but the finish line is unclear, and the webkit swings in with a murderer who is braided card, it was flow. Browser Buy-in, Community Push and a few more specification audits may tell us. Currently, it’s your movement – testing, fine tuning and way in. The answer comes, one layout at a time.