Урок 09. Старый vs Новый: проценты против grid

📁 Раздел: Раскладка ⏱️ Время изучения: ~50 мин 🎯 Сложность: Средняя

⚡ Кратко

Сетки на процентах и float требовали ручного расчёта ширин и отмены отступов у каждого четвёртого элемента. Grid делает это разметкой.

Сетка из трёх колонок

❌ Проценты и float

.row::after { content: ""; display: table; clear: both; }
.col {
  float: left;
  width: 33.3333%;
  padding: 0 12px;
  box-sizing: border-box;
}
@media (max-width: 768px) { .col { width: 100%; } }

Плюс «сетка» из 12 колонок в отдельном файле фреймворка и вечная борьба с отрицательными отступами контейнера.

✅ Grid

Колонка

<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
  <div class="rounded-lg bg-slate-100 p-4 text-sm text-slate-700">Колонка</div>
  <div class="rounded-lg bg-slate-100 p-4 text-sm text-slate-700">Колонка</div>
  <div class="rounded-lg bg-slate-100 p-4 text-sm text-slate-700">Колонка</div>
</div>

Раскладка страницы

❌ Абсолютное позиционирование сайдбара

.sidebar { position: absolute; left: 0; top: 0; width: 240px; }
.content { margin-left: 240px; }

Сайдбар выпадает из потока: его высота не влияет на страницу, футер наезжает, на мобильных всё ломается.

✅ Grid-шаблон

<div class="grid min-h-svh grid-cols-1 md:grid-cols-[240px_1fr]">
  <aside>…</aside>
  <main>…</main>
</div>

Что нового в v4

Возможность	Комментарий
`grid-cols-[…]`	произвольные шаблоны прямо в классе
Любое число колонок	`grid-cols-16` работает без настройки конфига
`col-span-full`	элемент во всю ширину сетки
Container queries	сетка может реагировать на ширину контейнера, а не окна (урок 11)
`subgrid`	вложенная сетка наследует дорожки родителя

⚠️ Проверить по документации: поддержка subgrid зависит от браузера. Перед использованием проверьте целевые платформы проекта.