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

Question

[Sergey]

Добрый день.

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

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

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

Спасибо.

Answer 1

[approximate solution]

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

Comments

[html-css]

gap задается контейнеру если чО а не элементам

Answer 2

[html-css]

Можно сделать таким способом
вместо gap использовать элементы нужных размеров

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