Выбор ответа Middle Grid обновлено
Неправильная область в grid-template-areas
Вопрос
Что произойдёт с таким объявлением?
.page {
display: grid;
grid-template-areas:
'header header'
'nav main'
'header footer';
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Объявление grid-template-areas будет невалидным и проигнорируется целиком. Каждая именованная область обязана быть одним прямоугольником.
Варианты ответа
- Область header займёт две строки и одну ячейку в третьей
- Объявление
grid-template-areasбудет невалидным и проигнорируется целикомправильный ответ - Браузер построит область header как прямоугольник от первой до третьей строки
- Будет создано две отдельные области с именем header
Разбор
Каждая именованная область обязана быть одним прямоугольником. Здесь header занимает первую строку целиком и ещё ячейку в третьей, получается не прямоугольник, и всё объявление невалидно: сетка будет без областей. Браузер не дорисовывает область сам и не создаёт две одноимённые области.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.