Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 29 из 53 · 8 мин
grid-column, grid-row, span, grid-area и именованные области grid-template-areas.
Шапка сверху на всю ширину, слева каталог, справа новости, внизу подвал.
Нарисуй мне раскладку словами в grid-template-areas — я расставлю всё по местам.
grid-columngrid-column: 1 / 3 — с первой линии по третью; span 2 — на две колонки.<style>
.g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .wide { grid-column: span 2; } .g > * { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; }
</style>
<div class="g"><div class="wide">На 2 колонки</div><div>1</div><div>2</div><div>3</div><div>4</div></div>grid-rowgrid-row: 1 / 3 или span 2.<style>
.g { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .tall { grid-row: span 2; } .g > * { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; }
</style>
<div class="g"><div class="tall">На 2 строки</div><div>1</div><div>2</div></div>grid-template-areas"header header" "menu aside".<style>
.g { display: grid; grid-template-areas: "h h" "m a"; gap: 6px; } .h { grid-area: h; } .m { grid-area: m; } .a { grid-area: a; } .g > * { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; }
</style>
<div class="g"><div class="h">Шапка</div><div class="m">Меню</div><div class="a">Акции</div></div>grid-areaРаскладка страницы в grid-template-areas читается как картинка — удобно и через полгода.
Опиши .page областями: grid-template-areas: "header header" "menu aside", и поставь header в область header через grid-area.
Выберите один ответ.
Что значит grid-column: span 2?
Выберите один ответ.
Зачем нужен grid-template-areas?
Проверяем состояние обучения…