• Теория
  • Теория

Верстаем список с gap

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

Кофе: длинный путь от сбора ягод до вашей кружки
Кофе: длинный путь от сбора ягод до вашей кружки
Лучшие машины для дома
Лучшие машины для дома
Советы от бариста: как выбрать хорошее зерно?
Советы от бариста: как выбрать хорошее зерно?
Рецепты на новогодние праздники
Рецепты на новогодние праздники

Мы не знаем, какой ширины окажется окно браузера у пользователя и какая карточка будет в ряду последней. Из-за этого мы не можем использовать :nth-child, чтобы убрать у неё отступ справа. Как быть?

Можно использовать свойство gap для флекса. При этом не важно, какая карточка будет последняя в ряду.

Но есть другой способ выстроить карточки внутри контейнера — использовать гриды. В этом случае мы сможем задать количество колонок.

Напишем новые стили для списка карточек, используя на этот раз гриды и gap.

.grid-container {
  display: grid;
  gap: 10px;
}

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

Макет списка карточек

Все колонки в списке должны быть одинаковой ширины. В этом случае удобно использовать значение-функцию repeat (от английского «повторить»). В скобках после repeat указывают количество колонок и их ширину. Значения разделяют запятой:

grid-template-columns: repeat(количество колонок, ширина колонки);
Этот код разобьёт грид-контейнер на четыре колонки шириной 100px:
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 100px);
}

Удалим весь код, который мы написали для реализации на флексах. После этого превратим список карточек в грид-контейнер и добавим отступы между карточками с помощью свойства gap. Используем repeat, чтобы разделить список на колонки, и попробуем задавать разные значения.

Без JavaScript будущему разработчику никуда. Записывайтесь на профессиональный курс по JavaScript первого уровня.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Микросетки. Начало» тренажёра «Базовые механики построения сеток» можно после регистрации и оформления подписки.