Как работает свойство gap в CSS Grid?

Свойство gap в CSS Grid задаёт расстояние (промежуток) между строками и колонками в сетке. 2 Это позволяет создавать равномерные отступы между элементами без использования margin или padding на самих элементах. 2

Свойство gap — это сокращённая запись для двух отдельных свойств: 2

1. row-gap — промежуток между строками. 2
2. column-gap — промежуток между колонками. 2

Значениями для свойства gap могут выступать: 1

• абсолютные величины (px, pt, cm); 1
• относительные величины (em, rem, vw, vh); 1
• проценты (%); 1
• ключевое слово normal (зависит от браузера, обычно равно 1em). 1

Промежутки добавляются только между двумя дорожками сетки, то есть они не добавляются перед первой и после последней дорожки. 4

Если указать только одно значение в свойстве gap, то браузер выставит данный отступ и для колонок, и для рядов. 5