Вивчайте 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