Урок 30. Старый vs Новый: Когда что использовать + мини-проект 4

📁 Раздел: CSS Grid ⏱️ Время изучения: ~80 мин 🎯 Сложность: Средняя
#display #grid-template-areas #grid-template-columns #grid-area #minmax #gap #justify-content #align-items

⚡ Кратко

Раньше holy-grail макет собирали на float с clear: both и ручными ширинами — хрупко и многословно. Сегодня тот же макет — одна Grid-сетка с grid-template-areas: читается как картинка и не требует «костылей» очистки потока.

Старый подход — float и clearfix

До Grid трёхколоночный макет собирали на float: left с фиксированными процентами ширины, а подвал спасали от «наезда» через clear: both. Колонки не выравнивались по высоте, порядок в HTML был жёстко привязан к визуальному, а любое изменение ширин ломало раскладку.

📄 lesson-30/old.css
.nav   { float: left; width: 20%; }
.main  { float: left; width: 60%; }
.aside { float: left; width: 20%; }
.footer { clear: both; }   /* иначе подвал «наедет» на колонки */
nav
main
aside
footer (нужен clear:both)
/* колонки разной высоты не выровнены,
   gap руками через padding/margin */

Новый подход — Grid с областями

Grid описывает всю двумерную структуру в одном месте: строки, колонки, области и промежутки. Колонки автоматически равной высоты, gap вместо ручных отступов, никакого clear.

📄 lesson-30/new.css
.holy-grail {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 14rem 1fr 16rem;
  gap: 1rem;
}
.nav { grid-area: nav; } .main { grid-area: main; } .aside { grid-area: aside; }
header
nav
main
aside
footer
/* колонки равной высоты, gap встроен,
   clear:both не нужен */

Навигация