@oldzas

Как в верстке сделать отступ используя сетку grid-template-columns?

Добрый день.

Столкнулся с версткой которая формирует сетку:

grid-template-columns: repeat(5, 20%); - делает 5 ячеек в строке с шириной каждой 20%
grid-column-gap: 10px; - делает отступ между ячейками в 10px (у всех, а не конкретной)

Вопрос: я видел на некоторых сайтах, где как-то делали отступ у первой и последней ячейки, но не знаю как они это делали, подскажите теги и параметры.

Спасибо.
  • Вопрос задан
  • 61 просмотр
Пригласить эксперта
Ответы на вопрос 3
l3ftoverz
@l3ftoverz Куратор тега CSS
Люблю Финский металкор
А для чего? В сетке не должно быть отступов у первой и последней ячейки.
Это решается иначе, например родителем с padding.

А так... ну задай им margin.
Ответ написан
approximate_solution
@approximate_solution
JS Developer
В гридах есть: grid-gap(общий для row\column) отступ, и отдельный дляrow: row-gap, и для column: column-gap. Ничего вам не мешает обратиться к отдельному элементу(ячейке) и подвинуть его margin'ами. Обратиться можно либо по классу, либо через nth-child(first-child,last-child) либо (n-child)
Ответ написан
@html-css
Можно сделать таким способом
вместо gap использовать элементы нужных размеров

и вообще если использовать проценты то grid-gap порвет сетку
лучше делать фракциями
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы