Клавиша / esc

grid-template

Короткий способ объявить все ряды и колонки внутри грид-контейнера одновременно.

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

Кратко

Скопировано

Шорткат для свойств grid-template-rows, grid-template-columns. Позволяет записать все значения в одну строку. Главное, после этого не запутаться при чтении 😅

Пример

Скопировано

Будет создано 4 ряда по 150 пикселей и три колонки: 1fr, 200 пикселей и 1fr по размерам:

        
          
          .container {  display: grid;  grid-template: repeat(4, 150px) / 1fr 200px 1fr;}
          .container {
  display: grid;
  grid-template: repeat(4, 150px) / 1fr 200px 1fr;
}

        
        
          
        
      

Как пишется

Скопировано

Можно прописать все колонки и ряды сразу, разделяя их слэшем /. Сперва идут ряды, а затем колонки, не перепутайте!

Используйте все доступные значения свойств grid-template-rows и grid-template-columns, разделяя их слэшем.

Подсказки

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

На практике

Скопировано

Алёна Батицкая советует

Скопировано

🛠 В этом же свойстве можно задавать значение и для grid-template-areas. Но, на мой взгляд, тогда код превращается в кашу и становится совершенно нечитабельным. Лучше всё же использовать это свойство отдельно:

Лучше так?

        
          
          .container {  display: grid;  grid-template:    [row1-start] "header header header" 25px [row1-end]    [row2-start] "footer footer footer" 25px [row2-end]    / auto 50px auto;}
          .container {
  display: grid;
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

        
        
          
        
      

Или так?

        
          
          .container {  display: grid;  grid-template:    [row1-start] 25px [row1-end]    [row2-start] 25px [row2-end]    / auto 50px auto;  grid-template-areas:    "header header header"    "footer footer footer";}
          .container {
  display: grid;
  grid-template:
    [row1-start] 25px [row1-end]
    [row2-start] 25px [row2-end]
    / auto 50px auto;
  grid-template-areas:
    "header header header"
    "footer footer footer";
}

        
        
          
        
      

Но техническая возможность есть, выбирать вам! 😉