Практика: 12-колоночная сетка

Классическая раскладка для лендингов: колонки по долям места.

Уровень: средний 10 разделов 12 минут

1. Что это и зачем

Классическая раскладка для лендингов: колонки по долям места.

Grid раскладывает элементы по двум осям сразу: объявляются треки (строки и колонки), а элементы размещаются по ним с помощью явного или неявного размещения. Grid — это система координат страницы.

{title} — идеален для каркаса страницы и повторяющихся карточек: одну сетку нельзя переписать flex'ом «в лоб».

2. Синтаксис и пример

.row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .col-4 { grid-column: span 4; }

Запись выше — базовый вариант использования. Обратите внимание, как практика: 12-колоночная сетка вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Дробные единицы fr делят место пропорционально, minmax() защищает от переполнения, grid-template-areas описывает каркас словами. Поведение по умолчанию — автоматическое размещение по рядам.

В реальной разметке практика: 12-колоночная сетка встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

{title} — идеален для каркаса страницы и повторяющихся карточек: одну сетку нельзя переписать flex'ом «в лоб».

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

Grid поддержан во всех современных браузерах без префиксов; подложка (subgrid) — новее и требует проверки совместимости.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

Доли: 1/3 = 4 колонки из 12 и т.д.

Финализируйте сетку под брейкпоинты.

7. Практическое задание

Постройте ряд «3 карточки по 4 колонки».

Попробуйте выполнить задание прямо в песочнице ниже — измените код из примера и оцените результат, а затем проверьте его надёжность в DevTools.

.row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .col-4 { grid-column: span 4; }

8. Как применять в проектах

Каркас страницы (шапка, контент, боковая колонка), галереи, списки карточек, раскладки с выравниванием по рядам.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

треки заданы через fr/minmax, а не только px;
явные области совпадают с визуальной картой;
для мелких строк flex, для каркаса grid;
переполнение контента обработано;
сетка перестраивается на мобильных;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам