- Теория
- Теория
Верстаем список с gap
Мы посмотрели, как будет выглядеть список, если в ряду окажется две или четыре карточки. Так как мы убрали отступ у каждой третьей карточки, то третья и четвёртая карточки начали слипаться. Кроме того, справа у границы контейнера снова появился лишний отступ.
![Кофе: длинный путь от сбора ягод до вашей кружки](/assets/courses/365/img/coffee-1.jpg)
![Лучшие машины для дома](/assets/courses/365/img/coffee-2.jpg)
![Советы от бариста: как выбрать хорошее зерно?](/assets/courses/365/img/coffee-4.jpg)
![Рецепты на новогодние праздники](/assets/courses/365/img/coffee-5.jpg)
Мы не знаем, какой ширины окажется окно браузера у пользователя и какая карточка будет в ряду последней. Из-за этого мы не можем использовать :nth-child
, чтобы убрать у неё отступ справа. Как быть?
Можно использовать свойство gap
для флекса. При этом не важно, какая карточка будет последняя в ряду.
Но есть другой способ выстроить карточки внутри контейнера — использовать гриды. В этом случае мы сможем задать количество колонок.
Напишем новые стили для списка карточек, используя на этот раз гриды и gap
.
.grid-container {
display: grid;
gap: 10px;
}
Так как при описании шаблона грид-контейнера мы указываем ширину колонок, то задавать ширину самим карточкам больше не нужно.
![Макет списка карточек](/assets/courses/365/img/html2_7.jpg)
Все колонки в списке должны быть одинаковой ширины. В этом случае удобно использовать значение-функцию repeat
(от английского «повторить»). В скобках после repeat
указывают количество колонок и их ширину. Значения разделяют запятой:
grid-template-columns: repeat(количество колонок, ширина колонки);
Этот код разобьёт грид-контейнер на четыре колонки шириной 100px:
.grid-container {
display: grid;
grid-template-columns: repeat(4, 100px);
}
Удалим весь код, который мы написали для реализации на флексах. После этого превратим список карточек в грид-контейнер и добавим отступы между карточками с помощью свойства gap
. Используем repeat
, чтобы разделить список на колонки, и попробуем задавать разные значения.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.