Как задать отступы между строками и колонками в CSS grid

Что проверяют

Знаете ли вы актуальный синтаксис и что происходит с размерами треков, когда появляется зазор. Вопрос кажется простым, поэтому следом спрашивают про отступ по краям сетки, про gap во Flexbox или про колонки в процентах.

Как отвечать

Основное свойство gap:

• gap: 24px: одинаковый зазор между строками и колонками;
• gap: 16px 24px: первое значение для строк, второе для колонок;
• row-gap и column-gap: полные свойства, когда нужно задать или переопределить одно направление;
• grid-gap, grid-row-gap, grid-column-gap: старые имена из ранней версии спецификации. Браузеры держат их как алиасы, но в новом коде пишут gap.

Дальше покажите, что понимаете поведение:

• только между треками: у краёв сетки зазора нет, внешний отступ задают padding контейнера;
• fr учитывает зазоры: repeat(3, 1fr) с gap: 24px сначала вычитает 48px и делит остаток, а repeat(3, 33.33%) с тем же зазором вылезет за контейнер;
• значения: любые длины, rem, CSS-переменные, clamp(), например gap: clamp(12px, 2vw, 32px);
• разный зазор между конкретными колонками свойством не задать: используют пустой трек или margin у элемента;
• Flexbox: gap там тоже работает во всех актуальных браузерах, трюки с отрицательным margin у контейнера больше не нужны.

Где спотыкаются

Называют основным способом grid-gap. Он работает, но выдаёт знания из старых статей.

Делают отступы через margin у ячеек. Появляются лишние отступы у краёв, их срезают через :nth-child, и всё ломается при смене числа колонок.

Забывают про justify-content и align-content. При space-between или space-around фактический промежуток между треками больше заданного gap, и кандидат не может объяснить, откуда он взялся.