Урок 28. Старый vs Новый: grid-area и сложные сетки

Старый подход — float и проценты

До Grid двумерные макеты собирали из одномерных трюков: float, ручные проценты ширины и «очистка обтекания» (clearfix), чтобы родитель не схлопывался. Результат хрупкий: gap приходится эмулировать отступами, а высоты колонок не выравниваются.

.sidebar { float: left;  width: 25%; }
.content { float: right; width: 72%; }   /* 3% «съел» зазор */
.row::after { content: ""; display: block; clear: both; }  /* clearfix */

Новый подход — grid-template-areas

Grid описывает двумерную структуру напрямую. Колонки задаются один раз, gap — встроенный, а карта в кавычках буквально показывает раскладку.

.page {
  display: grid;
  grid-template-areas: "sidebar content";
  grid-template-columns: 25% 1fr;
  gap: 12px;          /* настоящий зазор, без хаков */
}
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }