Why There Should Be a CSS area Property

Why There Should Be a CSS area Property

If you’ve ever tried to build a clean, balanced grid of logos, images, or cards, you know the struggle:

Some logos are square. Some are tall. Some are wide. And the problem of having these different shaped images occupy the same 'space' is difficult:

The Problem: Visual Weight Matters

When designers talk about “visual weight,” they mean how much space something feels like it occupies on the page. Humans don’t think in pixels, we think in area. But CSS doesn’t.

Right now, we size things with:

• width and height
• min-width / max-width / min-height / max-height
• object-fit and aspect-ratio

…but none of these let you say, “I want this image to take up this much space, period. No matter its shape.”

The result? Hours of tweaking width and height, fiddling with max/min values, adding extra containers - or worse - cropping your content.

The Idea: Size by Area

What if CSS let us size elements by area, not just width or height?

Imagine this:

img {
  area: 40000px;
}

The browser automatically calculates the width and height so the image occupies exactly 40,000 pixels of space, while keeping its natural aspect ratio.

Or, even better, for responsive layouts:

img {
  area: 50%;
}

Here, the browser scales the image so it takes up half of the container’s available area, adjusting width and height automatically to preserve aspect ratio. Portrait, landscape, square - it doesn’t matter. Every image ends up with the same visual weight.

Real-Life Use Cases

Logo Grids

No more manually resizing each logo. Every logo looks equally important, whether it’s tall, wide, or square:

.logo-grid img {
  area: 100%;
}

Responsive Photo Galleries

Portrait, landscape, or square, every photo has the same footprint and the gallery looks balanced:

.gallery img {
  area: 50%;
  overflow: allow; /* let images exceed container if needed */
}

Highlighted Content

Want a hero image to always occupy a fixed visual area? Done:

.featured img {
  area: 40000px;
}

Why This Would Be a Game-Changer

• Visual consistency: Mixed content looks balanced without manual tweaks.
• Responsive-ready: Percentage-based area scales naturally with the container.
• Less headache: No more juggling width, height, max/min constraints, or aspect-ratio hacks.
• Content-respecting: Preserves natural proportions - no cropping, no distortion.

In Short

We’re asking for a small idea that could solve a huge, recurring problem: let’s size things by the space they take up, not just by one dimension.

It’s intuitive. It’s elegant. And it’s exactly the kind of thing designers and developers have been wishing CSS could do for years.

So, CSS Working Group, hear us out: we need an area property. Our grids, galleries, and logos deserve it.

---