Things You Can Do With CSS Today — Smashing Magazine

Masonry Layouts Without JavaScript

For years, masonry layouts—popularized by Pinterest, Tumblr, and Unsplash—have required JavaScript libraries. CSS multicol offered a workaround, but it introduces a serious accessibility problem: content gets ordered in columns, so visual order and tab order diverge.

An update to CSS Grid changes that. By setting grid-template-rows to masonry, you declare a masonry axis. The browser then fills items in automatically, respecting both the grid and your specified gutters:

.masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
  grid-gap: 1rem;
}

Making that layout responsive takes only a bit more work. Instead of fixed column tracks, define minimum and maximum sizes with minmax(). The following gives each item a minimum of 16rem, then lets it grow to 1fr—one portion of the leftover space—when there is room:

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

When horizontal space runs out, the layout breaks and stacks cleanly while the masonry axis re-sorts the remaining items. Note that native masonry currently only works in Firefox Nightly or behind a flag, but in non-supporting browsers the grid declaration simply degrades to a regular grid, which makes this a solid progressive enhancement. If you need masonry today, stick with the established JavaScript library for production, but keep a ticket to swap in the native CSS later.

Compact Selector Lists With :is()

Verbose selector groups are a common CSS pain point. Fortunately, the :is() pseudo-class takes a selector list and expands it for you, turning long blocks into something far more readable:

.post h1,
.post h2,
.post h3 {
    line-height: 1.2;
}

.post img,
.post video {
    width: 100%;
}

becomes:

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

.post :is(img, video) {
    width: 100%;
}

The utility grows with complexity—you can chain :not(), :first-child, or other selectors within the parenthetical list. For specificity-sensitive projects, :where() offers a related alternative: it behaves like :is() but always has zero specificity, meaning its rules can be overridden out-of-context more easily. :is(), by contrast, takes the specificity of the most specific selector you pass it.

Browser support for :is() is strong—only IE11 and Opera Mini are left out—so it’s safe to adopt today. :where() currently works only in Firefox and Safari, so treat it as a future enhancement.

Sizing Logic: min(), max(), and clamp()

Responsive design increasingly leans on intrinsic methods, and CSS math functions have made those much less fragile. min() returns the smallest of its arguments; max(), the largest. clamp() is the most useful of the three: it accepts a minimum, an ideal, and a maximum value, guaranteeing a floor and ceiling for whatever you're sizing.

Fluid typography is the most visible application, since clamp() prevents unpredictable scaling outcomes by locking in sensible bounds. But these functions work just as well for layout details—sizing an avatar image, computing a responsive border-radius, or building flexible wrapper utilities. The principle is to define baselines you trust as your minimums and maximums, then let the browser pick the ideal value in between.

Units Built for Typography

While em and rem get the most attention, two other units derive directly from the rendered glyph itself. The ch unit equals the width of the 0 character in the current font at its current size. That scale makes it an excellent limiter for line length, supporting readability without hard-coded pixel values. One caveat: in proportional typefaces, 1ch generally runs 20–30% wider than the average character, so it isn't a precise average-width measure.

The ex unit, meanwhile, matches the height of a lowercase x—the traditional typographic x-height. It's especially handy for aligning icons or other inline elements with text on the vertical axis. For example, using ex to position <sup> and <sub> elements gives you accurate, responsive placement that solves a long-standing layout annoyance.

Text Decoration Gets Real Controls

Text decoration isn't limited to a single width and color anymore. Updates in the Text Decoration Level 4 draft bring finer control through properties such as text-decoration-thickness, text-decoration-skip-ink, and text-decoration-color. One standout use case: crafting highlight-style underlines without extra markup, or adjusting underline thickness on headings that get visually heavy in certain fonts.

Give Anchored Content Some Breathing Room

Jump links to in-page anchors are a standard pattern, but they come with a visual flaw: the target element lands flush against the top edge of the viewport. That is rarely what you want, and it is made worse when a fixed header sits on top of the page.

The scroll-margin-top property solves the problem cleanly. Instead of adjusting padding or adding JavaScript offset logic, you tell the browser to leave a gap between the scrolled-to element and the viewport edge. Combined with smooth scrolling, the effect feels polished and intentional.

[id] {
  scroll-margin-top: 2ex;
}

There is no reason to accept the default jump-to-anchor behavior anymore. It is a small property with an outsized impact on navigation quality.

Aspect Ratio Without The Padding Hack

For years, the only reliable way to preserve an element's aspect ratio was the dreaded padding-top hack. It worked, but it was always a workaround. The native aspect-ratio property changes that.

Define aspect-ratio: 1 / 1 for a perfect square, or aspect-ratio: 16 / 9 for a widescreen video container. The box keeps those proportions regardless of its width. That makes it straightforward to build responsive embeds without the fragile percentages of the old technique.

Even more valuable is what aspect-ratio enables for images. Browsers that support it can reserve the correct box size before the image file finishes loading. This directly reduces layout shift and the janky reflows that come with it. Adding explicit width and height attributes to your images amplifies the benefit, giving the browser all the information it needs to render a stable placeholder. Some browsers already apply this approach by default.

Adopting aspect-ratio now means your layouts are prepared for a future where the padding hack is a footnote in CSS history.

Skipping Off-Screen Render Work

Complex pages force browsers to compute styles and paint for the entire document, even for elements that are nowhere near the viewport. That is wasted effort that slows down initial load.

Two new properties change this: content-visibility: auto tells the browser it can skip rendering work for off-screen content. The browser then renders those sections lazily as they scroll into view. To avoid collapsed heights during that delay, pair it with contain-intrinsic-size, which lets you hint at the element's eventual size.

/* Example intent */
.card {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

For long articles, image galleries, or any page with repeated sections, this can deliver a meaningful boost to initial render time. The effect is progressive rendering in the truest sense: the browser focuses its effort where the user is looking.

What's Next On The CSS Horizon

The features above are already usable in production today with progressive enhancement. Looking ahead, the pipeline is just as exciting.

Media Queries Level 5 will bring user-preference targeting for ambient light and reduced data usage. CSS Nesting is in draft, promising SCSS-style selectors inside native stylesheets:

.my-element {
    background: red;

    & p {
        background: yellow;
    }
}

The cascade itself is evolving with Cascade Level 5, which introduces layers for better style-rule organization and control. Font metric override descriptors offer finer-grained tuning for loaded fonts, and container queries are in active prototyping. Scroll-linked animations are also on the roadmap, which could unlock entirely new interaction patterns.

The present state of CSS is strong, and the near-term future is brighter. Taking a pragmatic, progressive approach to these emerging features will keep your projects performant and ready for what ships next.