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

    CSS

    grid

    Короткий способ указать значения для большинства свойств гридов.

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

    Кратко

    Скопировано

    Мегашорткат, позволяющий задать значения всему и сразу. А конкретно с его помощью можно указать значения для следующих свойств:

    Пример

    Скопировано

    Такой блок кода:

            
          
          .container {  grid: 50px 150px / 2fr 1fr;}
          .container {
  grid: 50px 150px / 2fr 1fr;
}

    ...будет аналогичен этому коду:

            
          
          .container {  grid-template-rows: 50px 150px;  grid-template-columns: 2fr 1fr;}
          .container {
  grid-template-rows: 50px 150px;
  grid-template-columns: 2fr 1fr;
}

    Как пишется

    Скопировано

    none

    Скопировано

    Значение по умолчанию. Это ключевое слово сбрасывает значения для всех свойств, входящих в этот шорткат.

            
          
          .container {  display: grid;  grid: none;}
          .container {
  display: grid;
  grid: none;
}

    Значение для grid-template

    Скопировано

    Можно указать допустимые значения для шортката grid-template:

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

    В том числе можно указать имена для линий:

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

    Размеры колонок и рядов

    Скопировано

    Создадим два ряда и две колонки:

            
          
          .container {  display: grid;  grid: 200px 100px / 30% 30%;}
          .container {
  display: grid;
  grid: 200px 100px / 30% 30%;
}

    auto-flow

    Скопировано

    Ключевое слово auto-flow даёт браузеру понять, что создавать при необходимости: колонки или ряды.

    Если auto-flow стоит справа от слэша, то будут создаваться автоматические колонки:

            
          
          .container {  display: grid;  grid: 200px 100px / auto-flow 30%;}
          .container {
  display: grid;
  grid: 200px 100px / auto-flow 30%;
}

    Если auto-flow стоит слева от слэша, то будут создаваться автоматические ряды:

            
          
          .container {  display: grid;  grid:  auto-flow 30% / 200px 100px;}
          .container {
  display: grid;
  grid:  auto-flow 30% / 200px 100px;
}

    dense

    Скопировано

    К ключевому слову auto-flow можно добавить dense. Оно укажет браузеру, что элементы должны стараться заполнить свободные ячейки. Подробнее про работу этого ключевого слова можно почитать в статье про grid-auto-flow.

    Важно ставить это слово сразу после auto-flow:

            
          
          .container {  display: grid;  grid:  auto-flow dense 30% / 200px 100px;}
          .container {
  display: grid;
  grid:  auto-flow dense 30% / 200px 100px;
}

    Подсказки

    Скопировано

    💡 Перед тем как соблазниться возможностью расписать всё в одном свойстве, дважды (а то и трижды) подумайте о читабельности кода. Учтите и то, что гриды не такая уж простая технология. Не каждый коллега сможет прочесть этот шорткат.

    Поддержка в браузерах:
    О Baseline

    На практике

    Скопировано

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

    Скопировано

    🛠 Возможны и более сложные комбинации значений этого свойства. Например, можно сразу задать имена областям:

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

    Что аналогично:

            
          
          .container {  grid-template-areas:    "header header header"    "footer footer footer";  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];  grid-template-columns: auto 50px auto;}
          .container {
  grid-template-areas:
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
}

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

    • grid-template

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

    • grid-auto-flow

      Этим свойством можно поставить грид-элементы на пустое место.

    • Гайд по grid

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