Как сделать чтобы элементы в grid стояли ровно с контентом?

Question

[generate]

Как сделать чтобы свайпер и элементы в grid стояли ровно, раньше делал nth-child и каждом отдельно задавал padding но это сложно когда контент с бесконечной загрузкой. Подскажите как тут можно выровнять элементы с контентом.

Comments

[Ankhena]

Так уберите padding в 20px и используйте gap.
Зачем там двойная обертка у элементов?

Answer 1

[AntoniiTemny]

Удалить вот это:

.grid-box > div {
    padding: 20px;
}

Воспользоваться свойством gap в родительском grid контейнере:

.grid-box {
    grid-template-columns: 1fr 1fr 1fr;
    display: grid;
    gap: 20px;
}

Ну и отступ от элемента сверху сделать по вкусу.

Answer 2

[Сергей delphinpro]

.grid-box {
    grid-template-columns: 1fr 1fr 1fr;
    display: grid;
+    grid-gap: 20px;
}
-.grid-box > div {
-    padding: 20px;
-}