skip to main content

column-gap, row-gap

css

Кратко 🔗

Задаёт отступы между колонками и рядами в грид-раскладке.

Пример 🔗

.container {
display: grid;
grid-template-columns: 1fr 200px 1fr;
grid-template-rows: repeat(3, 150px);
column-gap: 10px; /* Отступы между колонками */
row-gap: 50px; /* Отступы между рядами */
}

Пример реализации свойств column-gap / row-gap

Как пишется 🔗

Указывайте одно значение размера в любых единицах измерения.

Подсказки 🔗

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

💡 Существуют старые аналоги этих свойств, которые могут пригодиться вам, если вы вынуждены поддерживать браузеры старше чем Chrome 68+, Safari 11.2 50+ и Opera 54+: grid-column-gap и grid-row-gap. Можно писать сперва старые свойства, а за ними новые. Чтобы наверняка.

Автор: Алёна,