Урок 27. Старый vs Новый: Строки, колонки и grid-template

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

⚡ Кратко

Раньше сетки карточек собирали на float с фиксированной шириной и ручными margin — хрупко и без адаптива. Теперь одна строка repeat(auto-fit, minmax(...)) делает то же гибко и без media queries.

Старый подход — float и фиксированная ширина

До Grid сетки карточек собирали через float: left с фиксированной шириной и margin-зазорами. Минусы: ширина жёсткая (не адаптивна), зазоры считаются вручную, нужен clearfix, а перенос строк ломается при разной высоте карточек.

1
2
3
📄 old.css
.card {
  width: 220px;
  float: left;
  margin: 0 16px 16px 0;
}
.cards::after { content: ""; display: block; clear: both; }

Новый подход — Grid с auto-fit

Grid описывает двумерную структуру напрямую. auto-fit + minmax() сами подбирают число колонок, gap задаёт зазоры без ручных margin, переноса и clearfix не требуется.

1
2
3
📄 new.css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
Вывод: 5 строк float-кода с clearfix заменяются тремя строками Grid — и при этом получаем адаптив без единого @media.

Навигация