Сетка с неизвестным количеством ячеек неизвестной ширины в CSS

Question

Предположим, у нас есть контейнер реагирующей сетки с неопределенным числом дочерних ячеек. Ширина и высота ячеек варьируются. Используя только CSS (возможно, CSS Grid), как мы можем создать такую ​​сетку, чтобы количество столбцов / строк и ширина / высота каждого столбца / строки определялось динамически на основе размера контейнера (без его переполнения) и размеров ячеек в один из следующих двух способов:

1. Ширина / высота для каждого столбца / строки определяется на основе самой широкой / самой высокой ячейки в этом столбце / строке
2. Ширина / высота для всех столбцов / строк определяется на основе самой широкой / самой высокой ячейки в сетке?

Применительно к ширине столбца эти два случая слабо соответствуют, соответственно, автоматическим и фиксированным алгоритмам размещения таблиц. За исключением того, что мы не знаем количество столбцов и строк; это должно быть как-то определено автоматически.

Следующие примеры демонстрируют эти два случая, примененные к ширине столбца. Для каждого случая есть два возможных направления потока: строка или столбец. Обратите внимание, что в примерах мы должны были указать количество столбцов и их размеры. Я бы хотел, чтобы они определялись автоматически.

Пожалуйста, попробуйте повторить эти примеры в своем ответе без указания точного количества столбцов, строк и ширины или высоты.

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  flex-wrap: wrap;
  grid-template-rows: repeat(3, auto);
  justify-content: space-between;
  border: 3px solid teal;
  font-size: 20px;
}
.flex {
  grid-template-columns: repeat(3, auto);
  width: min-content;
}
.fixed {
  grid-template-columns: repeat(3, 33.33%);
  width: 28em;
}
.column {
  grid-auto-flow: column;
}

.cell {
  padding: 1em;
  background: pink;
  border: 1px dashed teal;
  white-space: nowrap;
}

h3:not(:first-of-type) {
  margin-top: 3em;
}

<h3>Flexible column width. Flow in rows</h3>
<div class="container flex row">
	<div class="cell">One</div>
	<div class="cell">Two</div>
	<div class="cell">Buckle my shoe</div>
	<div class="cell">Three</div>
	<div class="cell">Four</div>
	<div class="cell">Knock at the door</div>
	<div class="cell">Five</div>
	<div class="cell">Six</div>
</div>

<h3>Flexible column width. Flow in columns</h3>
<div class="container flex column">
	<div class="cell">One</div>
	<div class="cell">Two</div>
	<div class="cell">Buckle my shoe</div>
	<div class="cell">Three</div>
	<div class="cell">Four</div>
	<div class="cell">Knock at the door</div>
	<div class="cell">Five</div>
	<div class="cell">Six</div>
</div>

<h3>Fixed column width. Flow in rows</h3>
<div class="container fixed row">
	<div class="cell">One</div>
	<div class="cell">Two</div>
	<div class="cell">Buckle my shoe</div>
	<div class="cell">Three</div>
	<div class="cell">Four</div>
	<div class="cell">Knock at the door</div>
	<div class="cell">Five</div>
	<div class="cell">Six</div>
</div>

<h3>Fixed column width. Flow in columns</h3>
<div class="container fixed column">
	<div class="cell">One</div>
	<div class="cell">Two</div>
	<div class="cell">Buckle my shoe</div>
	<div class="cell">Three</div>
	<div class="cell">Four</div>
	<div class="cell">Knock at the door</div>
	<div class="cell">Five</div>
	<div class="cell">Six</div>
</div>