Домашнее задание

Задача: соберите простую галерею на Grid — три равные колонки через fr и repeat(), промежутки через gap. Должно получиться как на превью ниже.

Ожидаемый результат

Фото 1

Фото 2

Фото 3

Фото 4

Фото 5

Фото 6

📄 lesson-26/homework.css

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Разметка

Создайте контейнер <section class="gallery"> и шесть дочерних блоков <article> с подписями «Фото 1»…«Фото 6».

📄 lesson-26/index.html

<section class="gallery">
  <article>Фото 1</article>
  <article>Фото 2</article>
  <!-- … до «Фото 6» -->
</section>

Сетка

На контейнере включите display: grid, задайте три колонки через repeat(3, 1fr) и добавьте gap: 16px. Шесть карточек сами лягут в две строки.

Проверка

Откройте страницу в браузере, нажмите F12, включите Grid overlay рядом с display: grid и убедитесь, что видны три колонки, две строки и gap между ними.

Связь с курсом: разметку повторите по разделу «Примеры», логику fr и gap — по «Теории». Эталон с разбором — на странице «Решения».

Урок 26. Домашнее задание: Введение в CSS Grid

⚡ Кратко