CSS grid with fluid dimensions, shrink content while keeping their aspect ratio

Question

I want this auto grid to expand and shrink with the browser, while keeping the items centered in it, preserving their aspect ratio.

Ideally :

Pure CSS
Keeping grid in "auto" mode (no template)

(I know use-case might sound dumb, but this is pseudo-code of more complicated one)

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}

.grid {
  height: 100%;
  display: grid;
}

.item {
  aspect-ratio: 1;
}

.item1 {
  grid-row: 1;
  grid-column: 1;

  /* Demo purpose */
  background-color: LightSalmon;
}
.item2 {
  grid-row: 1;
  grid-column: 2;

  /* Demo purpose */
  background-color: SlateBlue;
}
.item3 {
  grid-row: 2;
  grid-column: 1;

  /* Demo purpose */
  background-color: LightSeaGreen;
}
.item4 {
  grid-row: 2;
  grid-column: 2;

  /* Demo purpose */
  background-color: Plum;
}

<div class="grid">
  <div class="item item1">item1</div>
  <div class="item item2">item2</div>
  <div class="item item3">item3</div>
  <div class="item item4">item4</div>
</div>

Edit : what I want, visually

On a large screen :

|   [1][2]   |
|   [3][4]   |

On a narrow screen :

|      |
|[1][2]|
|[3][4]|
|      |

Without specifying any grid neither items size. (items expand to max width or max height, the other dimension accomodates accordingly)

Because items are added automatically. Thus "auto" in my question — Cyril CHAPON, Mar 01 '23 at 00:34
What do you mean by items being added automatically? On super narrow screen widths do you still want 2x2 rather than 1x4? — Zach Jensz, Mar 01 '23 at 00:35
I mean I want some static CSS and items count is not predictable by any means. On super narrow screens, yes I do want 2x2 and not 1x4. I'm not in a "responsible design" case here, just a grid to be displayed in its exact setup. — Cyril CHAPON, Mar 01 '23 at 00:37
Item count unpredictable how do you want 5 items to be displayed, or 6? Do you like want them clumped together as squareish as possible? Do you want them to scale with the screen size or have vertical and horizontal scrollbars? — Zach Jensz, Mar 01 '23 at 00:40
(My bad misunderstood your question, removed offensive comment). Items are added "per row" or "per column" so it wouldn't really matter — Cyril CHAPON, Mar 01 '23 at 01:00

score 1 · Answer 1 · answered Mar 01 '23 at 14:42

rely on vmin and aspect-ratio

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-content: center;
}

.grid {
  height: 100vmin;
  aspect-ratio: 1;
  display: grid;
}


.item1 {
  grid-row: 1;
  grid-column: 1;

  /* Demo purpose */
  background-color: LightSalmon;
}
.item2 {
  grid-row: 1;
  grid-column: 2;

  /* Demo purpose */
  background-color: SlateBlue;
}
.item3 {
  grid-row: 2;
  grid-column: 1;

  /* Demo purpose */
  background-color: LightSeaGreen;
}
.item4 {
  grid-row: 2;
  grid-column: 2;

  /* Demo purpose */
  background-color: Plum;
}

<div class="grid">
  <div class="item item1">item1</div>
  <div class="item item2">item2</div>
  <div class="item item3">item3</div>
  <div class="item item4">item4</div>
</div>

CSS grid with fluid dimensions, shrink content while keeping their aspect ratio

1 Answers1