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

1. Ученик объясняет разницу между Flexbox и Grid, используя записанные в тетрадь теги и свойства.
2. Ученик создаёт простую веб-страницу (шапка, меню, контент, подвал) с помощью Flexbox.
3. Ученик создаёт сетку из карточек (3×2) с помощью CSS Grid, соблюдая отступы и выравнивание.

Учитель: «Ребята, представьте: я вчера верстал сайт для нашей школьной газеты. Мне нужно было разместить три колонки с текстом рядом. Я решил использовать Grid и написал такой код: display: grid; grid-template-columns: 1fr 1fr 1fr;. И всё встало в одну линию — супер! Но когда я попробовал сделать шапку сайта с логотипом слева и меню справа, я снова взял Grid, написал display: grid; grid-template-columns: 1fr 1fr;, и… всё сломалось. Меню уехало вниз. Как вы думаете, почему? В чём моя ошибка?»

Пауза, выслушивание версий.

Учитель: «Сегодня мы разберёмся, когда использовать Flexbox, а когда Grid, и запишем все нужные теги в тетрадь, чтобы больше не путаться. Начнём с лекции.»

Ученики слушают, анализируют историю. Выдвигают гипотезы:

• «Надо было использовать Flexbox, а не Grid. Grid для сеток, а Flexbox для строки/колонки.»
• «Может, не хватало свойств выравнивания.»

Записывают тему урока в тетрадь.

Дескрипторы (без баллов):

• Ученик предлагает версию ошибки (Flexbox/Grid).
• Ученик проявляет интерес к теме.