`gap`

Время чтения: меньше 5 мин

Кратко

Шорткат для записи значений свойств row-gap и column-gap. Значения разделяются пробелом. Работает как с гридами, так и с флексбоксами.

Как пишется

Указываете два значения размера в любых единицах измерения, разделяя их пробелом. Первым указывается значение отступа для рядов, за ним значение отступа для колонок.

Не обязательно указывать два значения. Браузер поймёт, даже если будет одно — оно задаст row-gap и column-gap.

Пример c гридами

        
          
          .grid-container {  display: grid;  grid-template-columns: 1fr 1fr;  gap: 50px 10px;}
          .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px 10px;
}

Открыть демо в новой вкладке

Пример с флексами

        
          
          .flex-container {  display: flex;  gap: 50px 10px;}
          .flex-container {
  display: flex;
  gap: 50px 10px;
}

Открыть демо в новой вкладке

Подсказки