Tie row height to grid width

My grid can have cell content of varying heights, three cells in each row, the row height grows to match the tallest cell content, but should not drop below 1/3 of the grid width (basically meaning cells are either square or in portrait mode, but never in landscape mode).

I thought there would be a pure CSS way to achieve this, but so far I couldn't find it.

Is this doable with CSS?

(Plan B will be to use a ResizeObserver and propagate the current width into a custom css variable)

<div class="grid">
  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>

  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>
</div>

.grid {
  display: grid;
  gap: 20px;
  grid-auto-rows: 1fr; // ? something like minmax(container-width / 3, 1fr)
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cell {
  background-color: lightblue;
  border-radius: 40px;
  overflow: hidden;
}

Solution

You may give a try to containerquerie and cqw units (width of the parent container ) , min-height:33.33cqw should make an average square or grow taller .

exemple to test in your browser (tested only in ff & chrome)

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  container-type: inline-size;
}

.cell {
  background-color: lightblue;
  border-radius: 40px;
  min-height: calc(33.33cqw - 1em);
  /* removed the padding value */
  padding: 1em;
  box-sizing: border-box;
  overflow: hidden;
}


/* for demo in fullsize snippet */

.grid {
  max-width: 800px;
  margin: auto;
}

<div class="grid">
  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>
</div>