CSS сетка: можно ли использовать гибкое количество строк и столбцов?

Question

Есть ли способ использовать сетку CSS для создания чего-то похожего на макет обложки iTunes

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

Насколько я вижу, для сетки CSS обычно требуется либо фиксированная ширина, либофиксированное количество столбцов?

Я настроил тиддл, чтобы немного поиграться, однако до сих пор мне не удавалось указать гибкий макет, который бы добавлял новые строки и столбцы при необходимости: https://jsfiddle.net/dnu6g8wt/

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</section>

section {
  display: grid;
  grid-auto-rows: auto;
  grid-auto-flow: column;
  grid-gap: 10px;
}

div {
  min-width: 45px;
  max-width: 50px;
  background: gray;
}

Я не ищу способ, который использует сетку CSS, но было бы предпочтительнее придерживаться только CSS.Плитки, представляющие собой квадраты, были бы великолепны, но я понятия не имею, как можно создавать гибкие заголовки одинаковой ширины и высоты, используя только CSS.В прошлом мне удавалось создать такой макет с использованием JavaScript, однако это очень быстро усложняется.