Давайте создадим неявную сетку. grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); Вышеописанная строка говорит о том, что минимальная ширина колонки будет 200px. При этом колонок будет столько - насколько хватит для них места. Чтобы заполнить пустые ячейки в разметке укажем: grid-auto-flow: dense; Также давайте сделаем, чтобы изображение зайца и белки занимало 2 ячейки в обоих направлениях. Но в разметке всё равно проблемы. Исправим это с помощью flex.
Давайте создадим неявную сетку.
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
Вышеописанная строка говорит о том, что минимальная ширина колонки будет 200px. При этом колонок будет столько - насколько хватит для них места.
Чтобы заполнить пустые ячейки в разметке укажем:
grid-auto-flow: dense;
Также давайте сделаем, чтобы изображение зайца и белки занимало 2 ячейки в обоих направлениях.
Но в разметке всё равно проблемы. Исправим это с помощью flex.
Результат.
