📘 Как проходить тренажёр

Ты учишься управлять расположением элементов с помощью CSS Grid и Flexbox.

grid-template-columns: 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
place-items: center;
display: flex;
flex-wrap: wrap;

📘 Как пользоваться тренажёром

Этот тренажёр поможет тебе понять CSS Grid и Flexbox — главные инструменты для создания макетов сайтов.

Grid — это сетка из колонок и строк.
Представь тетрадь в клетку 🟦⬜ — это и есть Grid.

Чтобы включить Grid:

display: grid;

2 колонки:

grid-template-columns: 1fr 1fr;

3 колонки:

grid-template-columns: repeat(3, 1fr);

Расстояние между элементами:

gap: 20px;

Выравнивание по центру:

place-items: center;

Flex — это линия, по которой выстраиваются элементы.

Включить Flex:

display: flex;

Элементы в строку:

flex-direction: row;

Элементы в колонку:

flex-direction: column;

Перенос элементов:

flex-wrap: wrap;

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

justify-content: center;
align-items: center;

💡 Совет: экспериментируй! Можно менять размеры, формы и расположение — ничего не сломается 🙂