Как сделать отступ, используя сетку 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 порвет сетку
лучше делать фракциями