Sizing a grid column based on a child's aspect ratio

Question

My question is similar to this one: I'm trying to contain an aspect-ratio element within its parent element. One difference though, this aspect-ratio element has siblings—a header and a footer—and all this nice family should be center-aligned and share a common width.

Images are worth a thousand words:

GIFs are worth a thousand images:

I'm close to that result, but I'm not quite there yet:

body {
  height: 100%;
  margin: 0;
}

html {
  background-color: lightgrey;
  height: 100%;
}

#footer,
#header {
  background-color: blue;
  height: 50px;
}

#paper {
  aspect-ratio: 1;
  background-color: red;
  margin: auto;
  max-height: 100%;
  overflow: hidden;
  width: 100%;
}

#wrapper {
  align-content: center;
  display: grid;
  height: 100%;
}

<div id="wrapper">
  <div id="header"></div>
  <div id="paper"></div>
  <div id="footer"></div>
</div>

Any CSS wizard to help me out?

Do you definitely know the heights of the siblings, or is that 50px just there for a demo? — A Haworth, Jun 25 '22 at 10:59
Ok I just upgraded to 103 and it indeed breaks the demo @TemaniAfif, I'm not sure why. — tavoyne, Jun 25 '22 at 11:16

Temani Afif · Answer 1 · 2022-06-25T19:32:03.577

Not sure if you can get all the requirements but here is the best I could do (seems to work on chrome only)

body {
  background-color: lightgrey;
  margin: 0;
}

#footer,
#header {
  background-color: blue;
  height: 50px;
}

#paper {
  aspect-ratio: 1;
  background-color: red;
  max-height: 100%;
  max-width: 100vw;
}

#wrapper {
  place-content: center;
  display: grid;
  height: 100vmin;
  margin-block: max(0px,50vh - 50vmin);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

<div id="wrapper">
  <div id="header"></div>
  <div id="paper"></div>
  <div id="footer"></div>
</div>

If the 50px is known you can do like below:

body {
  background-color: lightgrey;
  margin: 0;
  --h: 50px; /* the fixed height */
}

#footer,
#header {
  background-color: blue;
  height: var(--h);
}

#paper {
  aspect-ratio: 1;
  background-color: red;
  width: min(100vw,100vh - 2*var(--h));
}

#wrapper {
  place-content: center;
  display: grid;
  height: min(100vh, 100vw + 2*var(--h));
  margin-block: max(0px, (100vh - 100vw - 2*var(--h))/2);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

<div id="wrapper">
  <div id="header"></div>
  <div id="paper"></div>
  <div id="footer"></div>
</div>

I hoped we could achieve that without relying on viewport units but it seems there's no way. Although it's hacky, that's the only working option so far and it does work on all major browser. — tavoyne, Jun 25 '22 at 20:12

score 1 · Answer 2 · answered Jun 25 '22 at 13:14

Try this solution, all the magic happens in grid-template-columns and grid-template-rows.

html {
  background-color: lightgrey;
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

#wrapper {
  --footer-header-height: 50px;
  align-content: center;
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr minmax(auto, calc(100vh - var(--footer-header-height) * 2)) 1fr;
  grid-template-rows: auto minmax(auto, 100vw) auto;
}

#footer,
#header {
  grid-column: 2;
  background-color: blue;
  height: var(--footer-header-height);
}

#paper {
  grid-column: 2;
  aspect-ratio: 1 / 1;
  background-color: red;
}

<div id="wrapper">
  <div id="header"></div>
  <div id="paper"></div>
  <div id="footer"></div>
</div>

That's hacky! Viewport units + explicit height for footer/header. If we were to use those, we could do way simpler and even remove the need for `aspect-ratio`: https://codepen.io/theophileavoyne/pen/vYdoMKe. — tavoyne, Jun 25 '22 at 13:27

tavoyne · Answer 3 · 2022-06-26T08:04:43.800

Actually Container Queries enable us to solve this kind of problems elegantly.

Support for this feature is currently very bad (see here), but it's part of Interop 2022 so I guess it'll look different by the end of the year.

I post this as an answer as it might help someone in the future

Note that you currently need to turn on a flag on Chrome to be able to test it.

body {
  container-type: size;
  height: 100%;
  margin: 0;
}

html {
  background-color: lightgrey;
  height: 100%;
}

#footer,
#header {
  background-color: blue;
}

#paper {
  background-color: red;
}

#wrapper {
  align-content: center;
  display: grid;
  grid-template-columns: min(100cqi, (100cqb - 100px));
  grid-template-rows: 50px min(100cqb - 100px, 100cqi) 50px;
  justify-content: center;
}

<div id="wrapper">
  <div id="header"></div>
  <div id="paper"></div>
  <div id="footer"></div>
</div>

Here's the same code but relying on viewport units (works in all browsers):

body {
  height: 100%;
  margin: 0;
}

html {
  background-color: lightgrey;
  height: 100%;
}

#footer,
#header {
  background-color: blue;
}

#paper {
  background-color: red;
}

#wrapper {
  align-content: center;
  display: grid;
  grid-template-columns: min(100vw, (100vh - 100px));
  grid-template-rows: 50px min(100vh - 100px, 100vw) 50px;
  height: 100%;
  justify-content: center;
}

<div id="wrapper">
  <div id="header"></div>
  <div id="paper"></div>
  <div id="footer"></div>
</div>

You are using 50px as explicit height. If those height are known, we can do it — Temani Afif, Jun 25 '22 at 19:22
I have update my second solution to make it works cross browser considering that 50px is known — Temani Afif, Jun 25 '22 at 19:33

Sizing a grid column based on a child's aspect ratio

3 Answers3