CSS Grid: колонки, области и двухмерная сетка

Grid управляет и строками, и колонками одновременно. Это удобно для галерей, дашбордов и раскладки «сайдбар + контент», где Flex потребовал бы вложенности.

Треки и промежутки

grid-template-columns задаёт колонки. Часто используют repeat(auto-fit, minmax(...)) — сетка сама подстраивает число колонок. gap задаёт ритм.

Выравнивание

Свойства justify-items/align-items работают на уровне ячеек. Для именованных областей есть grid-template-areas — удобно читать макет «как схему».

Связка с адаптивом

На мобильном часто оставляют одну колонку, на десктопе — несколько. Подробнее — в уроке адаптивная вёрстка.

HTML

<section class="cards">
  <article class="card">HTML</article>
  <article class="card">CSS</article>
  <article class="card">JavaScript</article>
  <article class="card">Git</article>
</section>

CSS

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
}
.card {
  padding: 1.25rem;
  background: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
}

Практическое задание

Задание: сделайте адаптивную сетку карточек на Grid.

  • Использован display: grid и gap
  • Колонки через repeat + minmax (или эквивалент)
  • На узком экране карточки складываются в одну колонку
  • Без Flex для самой сетки карточек