Урок 26. Старый vs Новый: Введение в CSS Grid

📁 Раздел: CSS Grid ⏱️ Время изучения: ~60 мин 🎯 Сложность: Средняя
#display #grid-template-columns #grid-template-rows #gap

⚡ Кратко

Раньше сетку собирали через float/проценты ширины с margin-хаками для зазоров. Теперь — display: grid + repeat(3, 1fr) + gap: короче, ровнее, без переполнений.

Старый подход

До Grid сложные сетки собирали через float и фиксированные ширины в процентах, а зазоры имитировали через margin у детей. Проблема: 33.333% + margin легко выходит за 100% и ломает ряд, а крайние отступы приходится обнулять вручную.

📄 lesson-26/old.css
.gallery__item {
  float: left;
  width: 33.333%;
  /* зазоры через margin → борьба с переполнением */
}
1
2
3
.gallery__item {
  float: left;
  width: 33.333%;
}

Новый подход

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

📄 lesson-26/new.css
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
1
2
3
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
Оба превью дают три колонки, но Grid делает это меньшим кодом и без риска переполнения от gap.

Навигация