Рабочий лист «Размещение элементов (Flexbox / Grid)» по информатике, 10 класс

Индивидуальный рабочий лист

Предмет: Информатика | Тема: Размещение элементов (Flexbox / Grid)

ФИО педагога: ____________________

Школа: ____________________

Класс/Возраст: 10

ФИ ученика: _______________________________ Дата: _______________

Инструкция: Внимательно читай задания. Ответы записывай прямо в лист (в специальные поля). Если нужно — пользуйся тетрадью для черновика. Все новые теги записывай в тетрадь во время лекции. Удачи!

📖 Лекция: Flexbox vs Grid (записываем в тетрадь)

Flexbox — для одномерного размещения (в одну строку или в одну колонку).

Контейнер:  display: flex;
Направление: flex-direction: row | column;
Выравнивание по главной оси: justify-content: center | space-between | flex-start | flex-end;
Выравнивание по поперечной оси: align-items: center | stretch | flex-start | flex-end;

Grid — для двумерного размещения (строки и колонки одновременно).

Контейнер:  display: grid;
Колонки:    grid-template-columns: 1fr 1fr 1fr;  (три равные колонки)
Отступы:    grid-gap: 10px;  (или gap: 10px;)
Ряды:       grid-template-rows: auto;

Простое правило: если нужно выстроить элементы в ряд или колонку — Flexbox. Если нужна сетка (таблица, карточки в несколько рядов и колонок) — Grid.