grid-auto-columns, grid-auto-rows

Как расположить грид-элементы, если им не хватило колонок и строк?

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

Кратко

Скопировано

Если элементов внутри грид-контейнера больше, чем может поместиться в объявленные явно ряды и колонки, то для них создаются автоматические, неявные ряды и колонки. При помощи свойств grid-auto-columns и grid-auto-rows можно управлять размерами этих автоматических рядов и колонок.

Пример

Скопировано

В этом примере создаются два явных ряда размером 50 и 140 пикселей. Элементы, начиная с третьего, в эти две строки не помещаются, и для них создаются автоматические ряды. При помощи свойства grid-auto-rows мы указываем, что автоматические ряды должны иметь размер 40 пикселей.

        
          
          .container {  display: grid;  grid-template-rows: 50px 140px;  grid-auto-rows: 40px;  gap: 20px;}
          .container {
  display: grid;
  grid-template-rows: 50px 140px;
  grid-auto-rows: 40px;
  gap: 20px;
}

        
        
          
        
      
Пример реализации свойств grid-auto-columns, grid-auto-rows.

Как понять

Скопировано

Если вы не уверены в количестве элементов, вложенных в грид-контейнер, то стоит предусмотреть автоматические колонки или ряды.

С помощью свойства grid-auto-columns мы указываем правило или паттерн создания неявных колонок.

Свойство grid-auto-rows управляет неявными рядами.

Как пишется

Скопировано

В качестве значения можно указать одно или более значений размеров создаваемых неявных грид-полос. При указании более одного значения размеры разделяются пробелами.

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

Подсказки

Скопировано
Поддержка в браузерах:
  • Chrome 66, поддерживается
  • Edge 79, поддерживается
  • Firefox 76, поддерживается
  • Safari 12.1, поддерживается
О Baseline