[css-grid] aspect ratio units needed

[jensimmons]

I know there has been discussion of aspect ratio units in the past.

We need them. Badly.

Especially with CSS Grid.

Why? When? So — there are many usecases where an Author wants to maintain a specific aspect ratio in their Grid cells. They want every cell to be 4x3 or to be a square.

For example in order to make every cell a square, maybe the browser looks at both min-content dimensions (or both results of auto) — and keeps the longer of the two. Then makes the shorter of the two into the same length as the longer.

Or a similar thing to keep 4x3, or keep 16x9.

I have not had a chance to read the proposed specs. Or code up demos. I just know this comes up over and over and over. I just had yet another person ask me how to do this, and all I can say is "use viewport units and a ton of media queries". We need something better.

[keithjgrant]

I agree. It’s do-able with existing CSS, but it’s a kludge: http://keithjgrant.com/posts/2017/03/aspect-ratios/

[keithjgrant]

…as that post points out, overflow issues can get interesting. What do you do when the width is constrained, but the contents need more space than the aspect ratio would allow for? Should an aspect ratio rule be allowed to force the width wider?

[Crissov]

Why would you want to solve this with units?

[frivoal]

There as some discussion of making the svg viewbox apply to css as well. w3c/fxtf-drafts#7

Depending on how it ends up working, you could maybe do things like this:

.grid-item {  view-box: 0 0 16 9; }

Then width: 160px; height: auto; would give you a height of 90px, and so on.

[fantasai]

I think this is technically a duplicate of #333?

[fantasai]

After some discussion with @jensimmons, I think the best solution here is to have an aspect-ratio property for the general case. For Grid, we do need a special unit because grid cells don't have properties, but it can be restricted to grid-template syntax the way fr units are.

[rachelandrew]

Here is a useful roundup of current aspect ratio attempts by authors.

https://www.bram.us/2017/06/16/aspect-ratios-in-css-are-a-hack/

[fantasai]

So, I was just thinking about this again and the problem is this: I have two columns of different widths (say 100px and 200px), and then one row indicating it wants an aspect ratio of 1:1. How tall is the row?