Установка минимального и максимального количества столбцов с помощью CSS Grid ⇐ CSS

[Anonymous]

У меня есть 10 элементов div (64 x 64 пикселя), которые я хочу отображать максимум в 5 столбцах (для больших и очень больших окон просмотра) и минимум в 3 столбцах (для маленьких окон просмотра, таких как iPhone 7 и т. д.).

Я пытаюсь сделать это с помощью CSS Grid, но не могу выполнить минимальную часть столбцов (это касается 2 столбцов, даже если есть место для размещения 3 столбцов).

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

body {
background-color: wheat;
}

.parent {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(100px, 140px));
max-width: 800px;
}

.child {
height: 64px;
width: 64px;
background-color: brown;
}

< /code>
< /div>
< /div>
< /p>

максимальная ширина для контейнера сетки составляет 800px. < / p>

Вот ссылка на Codepen

Изменить: если возможно, я хочу сделать это только с использованием CSS Grid, т.е. без с помощью медиа-запросов или Flexbox.

Подробнее здесь: https://stackoverflow.com/questions/524 ... g-css-grid