Кратко
Секция статьи "Кратко"Мегашорткат, позволяющий задать значения всему и сразу. А конкретно с его помощью можно указать значения для следующих свойств:
grid
- template - rows grid
- template - columns grid
- template - areas grid
- auto - rows grid
- auto - columns grid
- auto - flow
Пример
Секция статьи "Пример"Такой блок кода:
.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
Секция статьи "none" Значение по умолчанию. Это ключевое слово сбрасывает значения для всех свойств, входящих в этот шорткат.
.container { display: grid; grid: none;}
.container { display: grid; grid: none; }
Значение для grid-template
Секция статьи "Значение для grid-template" Можно указать допустимые значения для шортката grid
:
.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
даёт браузеру понять, что создавать при необходимости: колонки или ряды.
Если auto
стоит справа от слэша, то будут создаваться автоматические колонки:
.container { display: grid; grid: 200px 100px / auto-flow 30%;}
.container { display: grid; grid: 200px 100px / auto-flow 30%; }
Если auto
стоит слева от слэша, то будут создаваться автоматические ряды:
.container { display: grid; grid: auto-flow 30% / 200px 100px;}
.container { display: grid; grid: auto-flow 30% / 200px 100px; }
dense
Секция статьи "dense" К ключевому слову auto
можно добавить dense
. Оно укажет браузеру, что элементы должны стараться заполнить свободные ячейки. Подробнее про работу этого ключевого слова можно почитать в статье про grid
.
Важно ставить это слово сразу после auto
:
.container { display: grid; grid: auto-flow dense 30% / 200px 100px;}
.container { display: grid; grid: auto-flow dense 30% / 200px 100px; }
Подсказки
Секция статьи "Подсказки"💡 Перед тем как соблазниться возможностью расписать всё в одном свойстве, дважды (а то и трижды) подумайте о читабельности кода. Учтите и то, что гриды относительно новая и не такая уж простая технология. Не каждый коллега сможет прочесть этот шорткат.
На практике
Секция статьи "На практике"🛠 Возможны и более сложные комбинации значений этого свойства. Например, можно сразу задать имена областям:
.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; }