Gap Properties Reach Flexbox

The gap, column-gap, and row-gap properties have been available in Grid Layout since its initial browser implementation, and column-gap has long worked in multi-column layout. Flexbox, however, has historically required margins to space out items, which leaves you with unwanted space at the start and end of the container unless you introduce awkward negative margins.

That limitation is now going away. Flexbox gap support ships in Firefox and is available in the current Chrome beta. The property creates space only between flex items, eliminating the need for margin hacks entirely.

Renamed In Box Alignment

The gap properties originally shipped with a grid- prefix — grid-gap, grid-row-gap, and grid-column-gap. As with alignment features like justify-content and align-items, which moved from Flexbox into the Box Alignment specification once they proved useful beyond their origin, the gap properties were relocated to that same specification and renamed without the prefix.

Existing code using the prefixed versions remains valid — those properties are preserved as aliases. For new work, the unprefixed properties are supported in every browser.

Feature Query Limitation

If you're thinking of using feature queries to provide margin fallbacks for Flexbox gap, that won't work. Feature queries only test whether a browser recognizes a property-value pair, and a query for gap: 20px returns true in browsers that support gap in Grid but not yet in Flexbox. The CSS Working Group has an open issue on this problem, but it's not straightforward to solve, and the partial-implementation scenario is still rare.

Aspect Ratio Property

Images and videos carry an intrinsic aspect ratio that the browser preserves automatically. For elements without one — embedded iframes, for instance — developers have resorted to the padding hack, which exploits the fact that percentage padding in the block direction is calculated from the inline size.

A native aspect-ratio property promises to replace that workaround. Chrome Canary has implemented support behind the Experimental Web Platform Features flag. With it, you can define a ratio such as 1 / 1 on grid items so that the block size follows the inline size, keeping elements square even as their track widths change. The demo grid uses exactly this approach, and the items stay perfectly square when rotated.

Masonry Layout With CSS Grid?

Masonry layouts — where items fill rows but shorter items in earlier rows allow subsequent rows to flow upward into the gaps — have traditionally required JavaScript libraries. CSS Grid's auto-placement cannot reproduce that behavior: it always aligns items to strict rows and columns.

A Mozilla engineer has prototyped built-in masonry support as a value for grid-template. You can experiment with it in Firefox Nightly by setting the layout.css.grid-template-masonry-value.enabled flag to true in about:config. Whether masonry belongs in the Grid specification remains an open design question, but the prototype demonstrates a possible standardized path forward.

Subgrid Coming To Chromium

Firefox has supported the subgrid value of grid-template-columns and grid-template-rows for some time. A grid item with display: grid can inherit the track sizing and count from its parent grid instead of defining new tracks.

Chrome support has lagged, but in June 2020 a Chromium blog post announced that the Microsoft Edge team — now working on Chromium — is reimplementing Grid Layout into the LayoutNG engine. That effort includes adding subgrid support. Given that Microsoft originally brought Grid to browsers with the IE10 prefixed implementation, the news bodes well for the feature's eventual arrival in Chromium-based browsers.

Data Saver Media Query

The prefers-reduced-data media feature, still unimplemented in any browser, would let CSS detect whether a visitor has enabled data saving on their device and adjust accordingly — for example, by skipping large images. It belongs to the same family as the already-shipped user preference media features prefers-reduced-motion and prefers-color-scheme in the Media Queries Level 5 specification. A Chromium bug with recent activity suggests development may be underway.

Styling List Markers

The ::marker pseudo-element brings list bullets under direct CSS control. Previously you could only style the entire list item together — text and marker as a unit. Now you can change the marker's color or size independently.

Firefox already supports ::marker, and it's appeared in Chrome Beta. Beyond ordinary lists, the pseudo-element works on any element given display: list-item; the examples show how to swap in custom content such as emoji for headings.

How to Help Improve CSS

New CSS features are exciting, but they only become reliable through real-world testing. If you have a use case for a newly implemented feature, you should experiment with it across different browsers. Pay close attention to how the behavior compares between engines—::marker in Chrome, for instance, may render differently than it does in Firefox.

When you find a discrepancy or unexpected behavior, the first step is filing a solid bug report with the browser vendor. A good report includes a clear description, a minimal reproduction case, and details about your environment. The guide "How To File A Good Bug" covers this process in depth.

If your concern is about the specification itself—a missing feature, ambiguous wording, or an unsupported scenario—you should open an issue in the CSS Working Group's GitHub repository. The working group welcomes feedback from developers who have tested the spec in practical situations.

Further Reading

Smashing Editorial