Динамически обновлять количество столбцов на основе дочернего содержимого с максимальной высотой элементов сетки? ⇐ CSS

[Anonymous]

Я работаю над макетом CSS Grid, в котором все дочерние элементы (кнопки) должны иметь одинаковую ширину и высоту.
Я хочу, чтобы количество столбцов автоматически настраивалось в зависимости от содержимого. дочерних элементов.
Каждый элемент chile имеет максимальную высоту и минимальную ширину:
В следующем фрагменте содержимое третьей кнопки переполнено. его элемент. Моя цель состоит в том, чтобы содержимое помещалось внутри элемента, не превышая максимальную высоту, при этом гарантируя, что все одноуровневые элементы сохраняют одинаковую ширину. Количество столбцов должно корректироваться соответствующим образом, чтобы предотвратить переполнение.
Fiddle

Код: Выделить всё

.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
grid-auto-rows: 1fr;
gap: 10px;
max-width: 500px;
}

button {
max-height: 80px;
}

Код: Выделить всё

Button 1
Description 1


Button 2
Description 2


Button 3
Description 3 Description 3 Description 3 Description 3 Description 3


Button 4
Description 4


Button 5
Description 5


Button 6
Description 6

Вот правила:

• Все кнопки всегда должны оставаться одинаковыми по размеру (ширине и высоте).
• Высота элементов никогда не должна превышать 80 пикселей.< /li>
  Минимальная ширина элемента — 130 пикселей.

Можно ли этого добиться с помощью CSS-сетка? если нет, то какое может быть альтернативное решение?

Подробнее здесь: https://stackoverflow.com/questions/790 ... -on-grid-i