🎨

Модуль 2. CSS и оформление

Занятие 21
CSS Grid

Сегодня мы соберём ровную галерею работ в виде сетки, как в фотоальбоме.

👀

Сегодня сделаем вот такое

🧮

Сетка как тетрадь в клетку

↔️ Flexbox
одна линия
▦ Grid
строки и столбцы

Галереи, плитки карточек, раскладка страницы — это Grid.

▦

display: grid

  • Свойства — родителю
  • grid-template-columns — колонки
  • gap — промежутки
  • Дети сами заполняют клетки слева направо
<div class="grid">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.grid div {
  padding: 24px; text-align: center;
  font: bold 24px sans-serif;
  background: #74b9ff; border-radius: 10px;
}
🍕

Единица fr — кусочки пиццы

  • 1fr 1fr 1fr — три равных куска
  • 2fr 1fr — большой и маленький
  • 250px 1fr — фиксированный + остальное
  • repeat(4, 1fr) — короче
<div class="g"><b>2fr</b><b>1fr</b></div>
<div class="g2"><b>150px</b><b>1fr</b></div>
.g, .g2 { display: grid; gap: 8px; margin: 10px 0; }
.g { grid-template-columns: 2fr 1fr; }
.g2 { grid-template-columns: 150px 1fr; }
b { padding: 20px; color: white; text-align: center; font-family: sans-serif; background: #e17055; border-radius: 8px; }
🖼

Галерея с большой картинкой

  • grid-column: span 2 — на 2 колонки
  • grid-row: span 2 — на 2 строки
  • aspect-ratio: 1 + object-fit: cover — ровные картинки
<div class="gallery">
  <img class="big" src="/images/mountain.svg" alt="Горы">
  <img src="/images/cat.svg" alt="Кот">
  <img src="/images/dog.svg" alt="Собака">
  <img src="/images/rocket.svg" alt="Ракета">
  <img src="/images/cat.svg" alt="Кот">
</div>
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.gallery img {
  width: 100%; height: 100%;
  aspect-ratio: 1; object-fit: cover;
  border-radius: 10px;
}
.big { grid-column: span 2; grid-row: span 2; }
🪄

Волшебная формула

repeat(auto-fill, minmax(120px, 1fr))

«Столько колонок, сколько влезет, но не уже 120px»

Сетка сама подстраивается под экран!

<div class="tiles">
  <b>🍎</b><b>🍐</b><b>🍊</b><b>🍋</b>
  <b>🍌</b><b>🍉</b><b>🍇</b><b>🍓</b>
</div>
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
b { font-size: 44px; text-align: center; padding: 16px; background: #dff9fb; border-radius: 12px; }
🗺

Раскладка страницы: areas

Рисуем раскладку словами:

"header header"
"menu content"
"footer footer"

<div class="page">
  <header>header</header>
  <nav>menu</nav>
  <main>content</main>
  <footer>footer</footer>
</div>
.page {
  display: grid; gap: 8px;
  grid-template-columns: 120px 1fr;
  grid-template-areas:
    "header header"
    "menu content"
    "footer footer";
  font-family: sans-serif;
}
header { grid-area: header; background: #fab1a0; }
nav { grid-area: menu; background: #ffeaa7; }
main { grid-area: content; background: #81ecec; height: 120px; }
footer { grid-area: footer; background: #a29bfe; }
.page > * { padding: 12px; border-radius: 8px; }
🥕

Flexbox или Grid?

↔️ Flexbox
меню, кнопки в ряд, шапка
▦ Grid
галерея, плитка, раскладка страницы

🎮 Тренировка: cssgridgarden.com — поливаем морковку!

🃏

Запомни!

  • display: gridВключить сетку
  • grid-template-columns: repeat(3, 1fr)3 равные колонки
  • gap: 16pxПромежутки
  • grid-column: span 2Занять 2 колонки
  • minmax(150px, 1fr)Не уже 150px
  • object-fit: coverКартинка заполняет ячейку
⌨️

Практика: Галерея работ

  1. Сделай галерею из 6 картинок в 3 колонки.
  2. Добавь промежутки gap и скругли углы картинкам.
  3. Сделай первую картинку большой — на 2 колонки и 2 строки.
  4. Замени колонки на repeat(auto-fill, minmax(150px, 1fr)) и сузь окно.

🚀 Со звёздочкой: Сделай раскладку целой страницы на Grid с grid-template-areas: шапка, меню сбоку, контент, подвал. Поиграй в Grid Garden.

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Подумай, где на твоём сайте пригодится сетка: галерея, карточки, список фактов.