- Теория
- Теория
Свойство grid-template-areas и пустые ячейки грида
Свойство grid-template-areas
позволяет некоторые ячейки помечать как пустые.
Для этого вместо буквенного именования области используется символ точки .
К примеру, возьмём код из прошлой теории, где был грид из трёх столбцов.
grid-template-areas:
"red yellow green"
"red yellow green"
"red yellow green";
Если мы хотим, чтобы в первом ряду осталась только последняя зелёная ячейка, то заменим red
и yellow
в первой строке на точки:
grid-template-areas:
". . green"
"red yellow green"
"red yellow green";
Получается нужный нам результат:
Давайте дополним пустыми ячейками пример из прошлого задания.
Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Цена 22 900 ₽
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.