Testing the CSS Masonry Grid Layout in Firefox

This article provides a step-by-step guide for web developers on how to enable and test the experimental CSS Masonry grid layout in the Firefox web browser. It covers how to activate the necessary hidden configuration flag inside Firefox and demonstrates the exact CSS syntax required to build a native, JavaScript-free masonry layout.

Enabling the Masonry Flag in Firefox

Firefox was the first browser to ship a prototype of the CSS Grid Masonry specification. Because the specification is still experimental and under discussion by the CSS Working Group, the feature is locked behind a configuration flag.

To enable it, follow these steps:

  1. Open your Firefox browser (Firefox Nightly or Firefox Developer Edition is recommended for the latest updates, though the flag exists in the standard release).
  2. Type about:config into the address bar and press Enter.
  3. Click the Accept the Risk and Continue button if prompted with a warning page.
  4. In the search preference name box at the top, paste the following flag: layout.css.grid-template-masonry-value.enabled
  5. Click the Toggle button on the right side of the result to change its value from false to true.

Once this value is set to true, Firefox will immediately recognize and render the CSS Masonry syntax without requiring a browser restart.

Writing the HTML and CSS for Testing

under the Firefox implementation, masonry is treated as an extension of CSS Grid. You define a standard grid container and set either the rows or the columns to masonry.

Create an HTML file with a container and several child elements of varying heights:

<div class="masonry-container">
  <div class="item" style="height: 100px;">1</div>
  <div class="item" style="height: 250px;">2</div>
  <div class="item" style="height: 150px;">3</div>
  <div class="item" style="height: 300px;">4</div>
  <div class="item" style="height: 120px;">5</div>
  <div class="item" style="height: 200px;">6</div>
</div>

Next, apply the CSS. For a standard vertical masonry layout (like Pinterest), define your columns explicitly and set the rows to masonry:

.masonry-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  gap: 16px;
}

.item {
  background-color: #333;
  color: #fff;
  padding: 20px;
  border-radius: 8px;
}

If you want a horizontal masonry layout instead, swap the values by setting grid-template-rows: repeat(3, 1fr); and grid-template-columns: masonry;.

Testing Advanced Masonry Properties

Firefox also supports several new properties specifically designed to control the flow and alignment of items within a masonry grid. You can add these to your .masonry-container class to test different behaviors:

  • masonry-auto-flow: next;: By default, masonry places the next item into the column with the most available space (shortest column). Changing this value to next forces items to be placed strictly in order from left to right, regardless of column height.
  • masonry-auto-flow: definite-first;: This packs items with a explicitly defined grid placement first, before placing auto-positioned items.
  • align-tracks: Controls the alignment of the masonry tracks along the grid axis. You can test values like start, center, end, or stretch. You can also supply multiple values (e.g., align-tracks: start, center, end;) to align each column differently.

Inspecting the Layout

To debug and test the layout further, right-click on your webpage and select Inspect to open the Firefox Developer Tools. In the Layout panel, you can toggle the CSS Grid overlay. Firefox's grid inspector fully supports the masonry value, allowing you to visualize the tracks, gaps, and item placements directly in the viewport.