Как обычно, открыв страницу со спецификациями, я решил побродить и поискать что-нибудь новенькое для себя, например про text-fit, про который я скоро напишу, но, к моему удивлению, я наткнулся на, почему-то новенькую и свеженькую спецификацию про гэпы. Чтобы вы понимали, бедный gap кочует из спецификации в спецификацию, и я надеюсь, что он нашёл свой настоящий дом =)

Вот вам короткая история гэпов =)

Первое упоминание гэпов происходит 6 августа 2015 года в спецификации CSS Grid Layout Module Level 1 в статусе Working Draft (WD). В этой спецификации используются, обращаю ваше внимание, column-gap, row-gap и grid-gap. Пока эта спецификация дорабатывается и доходит до статуса Candidate Recommendation, через год, 29 сентября 2016 года, свойства меняют свои имена на grid-column-gap, grid-row-gap и grid-gap.

Со временем работы с гэпами стало понятно, что их будут использовать куда чаще, чем margin или padding, и было принято дать возможность использовать гэп в других контекстах, например во флексовом. Поэтому 6 сентября 2017 года гэпы переехали в новый для себя дом — в спецификацию CSS Box Alignment Module Level 3. Там же у свойств удалили префикс grid-, так как гэпы теперь можно использовать не только в гридах: column-gap, row-gap и gap, а все свойства гэпов с префиксом grid- теперь считаются устаревшими. Кстати, можете пройтись поиском по вашему проекту и поискать в нём grid-. Уже давно можно смело удалить префикс для гэпов.

30 августа 2018 года в этой же спецификации расширяют использование гэпов. Теперь их можно использовать для гридов, флексов и мультиколонок.

Где-то в промежутке появляется возможность стилизовать гэпы — CSS Gap Decorations Module Level 1. Про это я писал у себя в блоге.

И вот 24 июня 2026 года гэпы переселяют в CSS Gaps Module Level 1, причём совместно с декоративными возможностями. Это значит, CSS Gap Decorations Module Level 1 можно смело удалять =)