CSS, штука підступна. Сотні властивостей, десяток способів вирівняти блок по центру, і justify-content з 12 значеннями, які ще й комбінуються з safe та unsafe. Шпаргалки рятують на перших порах, але справжнє розуміння приходить лише з практикою. Причому бажано не на продакшені о третій ночі.

На щастя, фронтенд-спільнота вигадала спосіб краще: ігри. Так, справжні браузерні ігри, де ви керуєте жабами, обороняєте вежі, рятуєте інопланетян і непомітно для себе опановуєте флексбокс, гріди та селектори. Жодної теорії заради теорії, тільки код, який одразу видно в дії.

Я зібрав 8 безплатних CSS-ігор, які реально працюють у 2026 році. Кожна закриває конкретну тему, від базових селекторів до 3D-трансформацій. Плюс наприкінці, відео з повним проходженням найпопулярнішої гри, якщо застрягнете на якомусь рівні.

💡 Швидкий огляд:

• Відкрийте Flexbox Froggy: це найкращий старт для новачків, 24 рівні з миттєвим візуальним зворотним зв’язком, охоплює всі ключові властивості флексбокса.
• Перейдіть до Grid Garden і так само граючись розберіть CSS Grid, 28 рівнів від тих самих авторів з Codepip.
• Прокачайте селектори в CSS Diner (32 рівні): після неї жоден :nth-child() вас не налякає.
• Опануйте просунуті техніки: Flexbox Defense для бойового режиму, Unfold для 3D-трансформацій, Roadmap для читання вихідного коду.

Коротке порівняння: яку гру обрати

Відео: повне проходження Flexbox Froggy з поясненням кожної властивості. Якщо застрягли на рівні, відкрийте таймкод в описі.

1. Flexbox Froggy

Це, мабуть, найвідоміша CSS-гра у світі. Зроблена студією Codepip, вона проводить вас через 24 рівні, від простого justify-content: flex-end до хитрих комбінацій на кшталт flex-direction, align-items, align-content, flex-wrap, flex-flow и order. Механіка проста: пишете CSS-властивість, жаба стрибає на потрібну латаття.

Останній, 24-й рівень, легендарний. Він вимагає flex-direction: column-reverse разом із flex-wrap: wrap-reverse та align-content: space-between. Якщо пройдете з першого разу, ви розберетеся у флексбоксі на відмінно.

🔗 Flexbox Froggy | 🔗 Вихідний код на GitHub

2. Flexbox Defense

Tower Defense, де замість гармат, CSS-властивості. Ваші вежі розставлені на сітці, і щоб націлити їх на ворогів, ви пишете justify-content та align-items. 12 рівнів охоплюють align-items, justify-content, flex-direction, align-self и order.

Останні 4 рівні, серйозний челендж навіть для тих, хто вже пройшов Flexbox Froggy. Жодних підказок: тільки ви, браузер і хвилі ворогів. Автор, Ченнінг Аллен, виклав гру на GitHub повністю відкритою.

🔗 Flexbox Defense | 🔗 Вихідний код

3. Grid Garden

Від авторів Flexbox Froggy, та сама ідея, але для CSS Grid. Ви поливаєте грядки з морквою, прописуючи grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-template-columns, grid-template-rows, grid-area и order. 28 рівнів, на 4 більше, ніж у Froggy.

Гра заходить глибше за базовий grid-template-columns: 1fr 1fr. На 25+ рівнях ви оперуєте grid-area з іменованими областями, техніка, яка в реальних проєктах замінює більшість флексбокс-милиць для сіток.

🔗 Grid Garden | 🔗 Вихідний код

4. CSS Diner

32 рівні на селектори CSS, від банального plate до plate:only-child і apple:not(.small). Ви «замовляєте» елементи зі столу, записуючи селектор у редакторі праворуч. Підсвічування в реальному часі показує, що саме ви зачепили.

Найцінніше тут, рівні з псевдокласами. Після CSS Diner конструкції на кшталт :nth-child(2n+3), :last-of-type, :only-of-type перестають викликати бажання відкрити MDN. А 32-й рівень (plate pickles + apple:not(.small)), гідний фінал для тих, хто хоче називати себе експертом із селекторів.

🔗 CSS Diner | 🔗 Вихідний код

5. Unfold

Формально це не гра, а інтерактивна презентація CSS 3D-трансформацій від Кріса Руппела. Ви скролите, і сторінка розгортається у тривимірному просторі. rotateX, rotateY, translateZ, perspective: усе, що звучить лячно в документації, тут показано наочно.

Жодного рядка коду писати не потрібно. Просто скрольте, дивіться, як плаский прямокутник перетворюється на куб, і читайте коментарі автора. Після цього 3D-трансформації перестають здаватися чорною магією.

🔗 Unfold | 🔗 Вихідний код

6. Roadmap

Маленька аркада від Віктора Дарраса: машинка рухається дорогою, а ви керуєте нею мишею. Усю гру написано на чистому CSS і HTML, жодного рядка JavaScript. Це означає, що можна відкрити DevTools і побачити, як саме влаштовані clip-path, transform та @keyframes-анімації.

Сама гра не вчить CSS безпосередньо. Але вивчення вихідного коду — це мінікурс із просунутих технік. Мені знадобилося 8 спроб, щоб перемогти.

🔗 Roadmap на CodePen

7. Carnival

Тир на чистому CSS від Уни Кравец з команди Google Chrome. У вас є 8 секунд, щоб уразити всі мішені. Уся логіка, на чекбоксах і CSS-анімаціях: мішені рухаються, з’являються та зникають без жодного рядка скрипту.

Посилання на CodePen нижче веде до повного вихідного коду, можна форкнути, покрутити таймінги в @keyframes і зробити власну версію. Чудова вправа для розуміння, як далеко можна зайти з самим лише CSS.

🔗 Carnival на CodePen

8. Tic-Tac-Toe

Класика в несподіваному виконанні: хрестики-нулики без JavaScript. Альваро Монторо реалізував ігрову логіку винятково на чекбоксах, псевдокласі :checked і CSS-анімаціях. Два рівні складності, на другому комп’ютер «думає» трохи краще (наскільки це можливо без скриптів).

Практична користь: після розбору вихідного коду ви зрозумієте, як працюють суміжні селектори (+), :checked і як будувати складну логіку на самих лише стилях. Для пет-проєктів і демо, безцінна техніка.

🔗 Tic-Tac-Toe на CodePen

⁉️🤔 Часті запитання

Чи допоможуть ці ігри новачкові, який взагалі не знає CSS?

Так, саме для цього вони й створені. Почніть із Flexbox Froggy, гра проведе вас від justify-content: flex-start до складних комбінацій без жодних попередніх знань. Паралельно тримайте відкритою документацію MDN з Flexbox для контексту. За 2-3 вечори ви повністю закриєте тему флексбоксу.

Чи є сенс проходити ігри досвідченому розробникові?

Так, але вибірково. Замість Flexbox Froggy (буде нудно на перших 15 рівнях) беріть одразу Flexbox Defense, бойова атмосфера та жорсткіші обмеження. Grid Garden корисна навіть тим, хто пише grid-template-columns щодня: 25+ рівнів із grid-area показують техніки, які рідко зустрічаються в туторіалах. CSS Diner на рівнях 25-32, найкращий тест на знання псевдокласів.

Чому ігри, а не відеокурс чи документація?

Ігри дають миттєвий візуальний зворотний зв’язок: ви написали align-items: center і одразу побачили, як жаба стрибнула в центр. У цьому фундаментальна відмінність від пасивного перегляду відео: формується м’язова пам’ять, тому що ви самостійно пишете код. Плюс елемент челенджу: бажання пройти наступний рівень тримає краще за будь-який дедлайн.

Чи відповідають ці ігри сучасним специфікаціям CSS (2026)?

Так. Flexbox і Grid, зрілі специфікації, їхні базові властивості не змінювалися роками. Нові можливості на кшталт align-content у звичайному потоці (2024) або if()-умов (2025) у цих іграх не охоплені, але це нішеві функції, які не потрібні в щоденній роботі. Для переважної більшості реальних макетів вистачає того, чого навчають ці ігри.

Що робити, якщо гра не працює в моєму браузері?

Усі 8 ігор тестувалися в Chrome і Firefox, проблем не виявлено. Якщо гра не завантажується: перевірте, чи не заблоковано JavaScript (Flexbox Defense і Roadmap потребують скриптів); спробуйте відкрити в режимі інкогніто (розширення іноді ламають верстку). Tic-Tac-Toe і Carnival на CodePen можуть вимагати кліку «Run» для запуску.

Чи варто грати в CSS у 2026 році?

Ці 8 ігор, не просто розвага на вечір. Кожна закриває конкретну прогалину: Flexbox Froggy плюс Flexbox Defense дають повне охоплення флексбоксу з різних кутів, Grid Garden, найбезболісніший вхід у CSS Grid, CSS Diner, селектори без зубріння, а Roadmap, Carnival і Tic-Tac-Toe показують, наскільки глибоко можна зайти з самим лише CSS.

Якщо ви новачок, почніть із Froggy, потім Grid Garden, потім Diner. Три вечори, і ви опануєте більшу частину того, що реально потрібно в роботі. Якщо досвідчений, пропустіть перші 15 рівнів Froggy, але обов’язково пройдіть CSS Diner до кінця та розберіть вихідний код Carnival. І те, і те займе менше години.

Усі 8 ігор безплатні, відкриті (крім Roadmap, вихідний код читається прямо в DevTools) і працюють у 2026 році без змін. Жодної реєстрації, жодних платних планів. Відкривайте першу гру та пишіть CSS.