- Теория
- Теория
Испытание: Набор стикеров
У Кекса есть свой набор стикеров для Телеграма, но, кажется, ещё не все об этом знают. Чтобы исправить сие досадное упущение, Кекс поручил вам сверстать список со своими любимыми стикерами.
Стикеры в списке нужно расположить в несколько колонок. Количество колонок должно зависеть от ширины окна браузера. Минимальная ширина колонок — 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;
}
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.