Enter
    Расширенный поиск
    Клавиша / esc

    CSS

    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, разделяя их слэшем.

    Подсказки

    Скопировано
    Поддержка в браузерах:
    О 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";
}

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

    Читайте также

    • Гайд по grid

      Полный список свойств для создания раскладки на гридах и управления ею.