Изучайте CSS с помощью игр: Flexbox Froggy и Grid Garden

Начните с Flexbox Froggy, чтобы попрактиковаться в выравнивании по оси, затем используйте Grid Garden, чтобы попрактиковаться в размещении элемента между линиями сетки. После каждого игрового упражнения воспроизведите идею на небольшой собственной странице. Полезным результатом будет умение объяснить, почему объявление работает при изменении макета, а не запоминать ответ на конкретный уровень.

Как изучать CSS с помощью игр, а затем применять полученные знания.

Этот курс сочетает две игры с тремя оригинальными упражнениями. Он подходит тем, кто может прочитать простое правило CSS и хочет получать наглядную обратную связь. Это не полный курс веб-разработки: реальные интерфейсы также должны иметь читаемый контент, адаптивное поведение, доступ с клавиатуры и тестирование с разным количеством текста.

Выберите подходящее упражнение для вашего вопроса

Игры предоставлены Codepip. Cozcade связывает каждую размещенную игру с соответствующим руководством: Flexbox Froggy и его руководство; Grid Garden и его руководство. Оригинальные страницы Froggy и Grid Garden содержат собственные версии авторов. Используйте клавиатуру при выполнении упражнений по коду.

Сначала назовите ось, прежде чем выбирать свойство.

Flexbox имеет главную ось и поперечную ось. flex-direction задает основное направление; justify-content размещает элементы вдоль главной оси, а align-items касается поперечной оси. В обычном ряду слева направо главная ось горизонтальна. Измените направление на столбец, и она станет вертикальной. Эти определения описаны в введении в Flexbox для MDN.

Прежде чем пытаться использовать объявления в Froggy, укажите, в каком направлении вы хотите перемещать элементы. Затем назовите это направление относительно текущей главной оси. Это превращает неправильный ответ в конкретный вопрос: вы выбрали неправильное свойство, неправильное значение или неправильную ось?

Упражнение 1: переместите группу в конец

Создайте три маленьких элемента внутри контейнера. Это оригинальное упражнение, а не скопированный игровой уровень или ключ к ответам.

<div class="practice-row">
  <span>A</span><span>B</span><span>C</span>
</div>

.practice-row {
  display: flex;
  gap: 0.5rem;
  min-height: 8rem;
  padding: 1rem;
  border: 2px solid;
  direction: ltr;
}

Ваша цель — переместить три элемента вместе к правому краю, не меняя их порядок и не создавая для каждого элемента отдельного поля. Предскажите результат, затем добавьте justify-content: flex-end в контейнер.

Теперь сравните его с justify-content: space-between. Первый вариант перемещает группу; второй распределяет доступное пространство между элементами. Попробуйте узкий и широкий контейнер. Объясните, какой вариант вы бы выбрали для трех кнопок, которые должны оставаться близко друг к другу. Визуальный результат важнее, чем запоминание одного значения.

Упражнение 2: сохраните ту же инструкцию, измените ось.

Используйте этот контейнер повторно, добавьте flex-direction: column, установите height: 12rem и сохраните justify-content: flex-end. Теперь элементы сгруппированы внизу. Ваше объявление не стало командой «переместить вправо»: оно по-прежнему работает вдоль основной оси, которую вы изменили.

Далее добавьте align-items: flex-start. Сравните расположение до и после этого добавления. При указанном направлении слева направо элементы выравниваются влево по поперечной оси. Удалите объявление и снова понаблюдайте за поведением растяжения по умолчанию.

Напишите краткое объяснение обоих изменений, не используя фразу «просто работает». Например, укажите ось, свободное пространство и группу, которая позиционируется. Если вы не можете объяснить результат, сократите пример до двух элементов и изменяйте только одно объявление за раз. Это привычка, которую следует вернуть в игру.

Далее, отличите дорожку сетки от ее границы.

Размещение сетки использует линии, окружающие строки и столбцы. Пять явных столбцов имеют шесть граничных линий. Элемент, размещенный от строки 3 столбца до строки 5, охватывает два столбца, а не три. См. Введение в сетку MDN для ознакомления с различиями между дорожками, ячейками и линиями.

В Grid Garden перед попыткой позиционирования ознакомьтесь с начальными и конечными границами. Если подсчет ячеек вызывает затруднения, нарисуйте или обозначьте границы на своей странице.

Упражнение 3: поместите карточку между двумя строками

Создайте игровое поле из пяти столбцов и добавьте на него одну карточку:

<div class="practice-grid">
  <div class="practice-card">Two-column card</div>
</div>

.practice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, 4rem);
  gap: 0.5rem;
  direction: ltr;
}

.practice-card {
  grid-column: 3 / 5;
  grid-row: 2;
  background: #d9ceff;
  color: #201538;
}

Предскажите, где появится карточка, прежде чем открывать страницу. Затем сделайте так, чтобы она занимала все поле, изменив только расположение столбцов. С пятью указанными выше столбцами grid-column: 1 / 6 достигает от первой границы до последней.

Наконец, измените текст на гораздо более длинное предложение и сузьте окно браузера. Правило размещения может оставаться правильным, в то время как фиксированная высота карточки становится непригодной для ее содержимого. Решение игрового упражнения учит одной части верстки; создание удобной страницы требует также проверки содержимого.

Используйте игровой прогресс как обратную связь, а не как доказательство освоения материала.

После успешного выполнения упражнения измените одно предположение: направление, количество элементов, доступную ширину или длину текста. Предскажите результат, прежде чем смотреть. Если вы сможете адаптировать идею и объяснить изменение, вы узнали больше, чем просто ответ на вопрос уровня.

При возвращении к игре убедитесь, что вы открываете ту же версию и браузер. Cozcade Избранное в учетной записи определяет игры, к которым вы хотите вернуться; это не гарантирует, что внутренний прогресс урока игры перенесется между устройствами. Избегайте удаления сохраненных данных сайта во время проверки прогресса и используйте функцию явного экспорта только в том случае, если данная игра ее предоставляет.

Продолжить с руководством по сопоставлению

Используйте руководство Froggy для отработки осей и выравнивания, а также руководство Grid Garden для вопросов по размещению. Если вам нужен другой вид практики после этого, просмотрите обучающие игры.

Упражнения, приведенные выше, были написаны для этой статьи. Справочные страницы были проверены 11 октября 2026 года. Наши записанные проверки игрового процесса охватывают небольшое количество взаимодействий с настольными приложениями, а не прохождение всех уровней или полный мобильный курс. Эта статья обучает последовательности практических упражнений; она не дает квалификации и не заменяет тестирование ваших собственных интерфейсов.

Игры, в которые можно играть на Cozcade

Flexbox FroggyGrid Garden