У Кекса есть свой набор стикеров для Телеграма, но, кажется, ещё не все об этом знают. Чтобы исправить сие досадное упущение, Кекс поручил вам сверстать список со своими любимыми стикерами.

Стикеры в списке нужно расположить в несколько колонок. Количество колонок должно зависеть от ширины окна браузера. Минимальная ширина колонок — 100px, но они могут становиться шире, чтобы занять всё свободное пространство в контейнере.

У списка нужно обнулить внешние отступы и переопределить внутренние. Также нужно добавить отступы между стикерами.

Каждый третий стикер должен занимать два ряда и две колонки. Используйте для этого псевдокласс :nth-child(3n).

Порядок стикеров не принципиален, но пропущенных ячеек быть не должно.

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

.stickers-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-flow: dense;
  gap: 10px;
  margin: 0;
  padding: 20px;
}

.sticker:nth-child(3n) {
  grid-column: span 2;
  grid-row: span 2;
}