gap

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

Кратко

Секция статьи "Кратко"

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

Как пишется

Секция статьи "Как пишется"

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

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

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

Секция статьи "Пример 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;
}

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

Подсказки

Секция статьи "Подсказки"