column-gap, row-gap

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

Кратко

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

Задаёт отступы между колонками и рядами в грид-раскладке.

Пример

Секция статьи "Пример"
        
          
          .container {  display: grid;  grid-template-columns: 1fr 200px 1fr;  grid-template-rows: repeat(3, 150px);  /* Отступы между колонками */  column-gap: 10px;  /* Отступы между рядами */  row-gap: 50px;}
          .container {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  grid-template-rows: repeat(3, 150px);
  /* Отступы между колонками */
  column-gap: 10px;
  /* Отступы между рядами */
  row-gap: 50px;
}

        
        
          
        
      
Пример реализации свойств column-gap / row-gap

Как пишется

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

Указывайте одно значение размера в любых единицах измерения.

Подсказки

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

💡 В инспекторе Firefox отступы заштриховываются, так их можно отличить от грид-элементов.