- Теория
- Теория
Верстаем список с 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
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.