skip to main content

grid

css

Кратко 🔗

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

Пример 🔗

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

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

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

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

Как пишется 🔗

none 🔗

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

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

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

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

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

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

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

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

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

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

auto-flow 🔗

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

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

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

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

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

dense 🔗

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

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

.item {
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-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;
}

Автор: Алёна,