Naučte se CSS pomocí her: Flexbox Froggy a Grid Garden

Začněte s Flexbox Froggy k procvičení zarovnání podél osy a poté použijte Grid Garden k procvičení umístění položky mezi čárami mřížky. Po každém herním cvičení si danou myšlenku zopakujte na vlastní malé stránce. Užitečným výsledkem je schopnost vysvětlit, proč deklarace funguje při změně rozvržení, spíše než si pamatovat odpověď pro konkrétní úroveň.

Jak se naučit CSS s hrami a poté ho aplikovat

Tato cesta kombinuje dvě hry se třemi originálními cvičeními. Je vhodná pro někoho, kdo umí přečíst jednoduché pravidlo CSS a chce viditelnou zpětnou vazbu. Nejedná se o kompletní kurz webového vývoje: reálná rozhraní také potřebují čitelný obsah, responzivní chování, přístup z klávesnice a testování s různým množstvím textu.

Vyberte správné cvičení pro vaši otázku

Hry jsou od Codepipu. Cozcade propojuje každou hostovanou hru s odpovídajícím průvodcem: Flexbox Froggy a její průvodce; Grid Garden a její průvodce. Původní stránky Froggy a Grid Garden obsahují vlastní verze autorů. Při provádění cvičení s kódem používejte klávesnici.

Nejprve pojmenujte osu před výběrem vlastnosti

Flexbox má hlavní osu a příčnou osu. flex-direction nastavuje hlavní směr; justify-content umisťuje položky podél této hlavní osy, zatímco align-items se týká příčné osy. V normálním řádku zleva doprava je hlavní osa vodorovná. Změňte směr na sloupec a stane se svislou. Tyto definice jsou uvedeny v Úvod do Flexboxu MDN.

Než se pokusíte o deklarace ve Froggy, řekněte, kterým směrem chcete, aby se položky pohybovaly. Poté tento směr pojmenujte vzhledem k aktuální hlavní ose. Tím se špatná odpověď promění v konkrétní otázku: vybrali jste špatnou vlastnost, špatnou hodnotu nebo špatnou osu?

Cvičení 1: přesunutí skupiny na konec

Vytvořte tři malé položky uvnitř kontejneru. Toto je originální cvičení, nikoli zkopírovaná herní úroveň nebo klíč k odpovědi.

<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;
}

Vaším cílem je přesunout tři položky společně k pravému okraji, aniž byste změnili jejich pořadí nebo dali každé položce samostatný okraj. Předpovězte výsledek a poté do kontejneru přidejte justify-content: flex-end.

Nyní jej porovnejte se justify-content: space-between. První možnost přesune skupinu; druhá rozdělí dostupný prostor mezi položky. Vyzkoušejte úzký a široký kontejner. Vysvětlete, kterou verzi byste zvolili pro tři tlačítka, která by měla zůstat blízko sebe. Viditelný výsledek je důležitější než zapamatování si jedné hodnoty.

Cvičení 2: zachovat stejnou instrukci, změnit osu

Znovu použít tento kontejner, přidat flex-direction: column, nastavit height: 12rem a ponechat justify-content: flex-end. Položky se nyní shromažďují směrem dolů. Vaše deklarace se nestala příkazem „posunout doprava“: stále funguje podél hlavní osy, kterou jste změnili.

Dále přidat align-items: flex-start. Porovnat uspořádání před a po tomto přidání. Při zadaném směru zleva doprava se položky zarovnají směrem doleva na příčné ose. Odebrat deklaraci a znovu sledovat výchozí chování roztahování.

Napsat krátké vysvětlení obou změn bez použití fráze „prostě to funguje“. Například určit osu, volný prostor a skupinu, která se umisťuje. Pokud nemůžete vysvětlit výsledek, zredukovat příklad na dvě položky a změnit pouze jednu deklaraci najednou. Tento zvyk si znovu zapamatujte ve hře.

Dále rozlište stopu mřížky od její hranice.

Umístění v mřížce používá čáry obklopující řádky a sloupce. Pět explicitních sloupců má šest hraničních čar. Položka umístěná od řádku 3 do řádku 5 se rozprostírá přes dva sloupce, nikoli přes tři. Rozdíl mezi stopami, buňkami a čarami naleznete v MDN's Grid introduction.

V Grid Garden si před pokusem o pozici přečtěte počáteční a koncové hranice. Pokud je počítání mezer matoucí, nakreslete nebo označte hranice na vaší vlastní stránce.

Cvičení 3: umístěte kartu mezi dva řádky

Vytvořte tabuli s pěti sloupci a dejte jí jednu kartu:

<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;
}

Před otevřením stránky předpovězte, kde se karta objeví. Poté ji upravte tak, aby se rozprostírala přes celou tabuli změnou pouze umístění jejího sloupce. S pěti explicitními sloupci výše dosahuje grid-column: 1 / 6 od první hranice k poslední.

Nakonec změňte text na mnohem delší větu a zúžte prohlížeč. Pravidlo umístění může zůstat správné, i když se prezentace karty s pevnou výškou stane nevhodnou pro její obsah. Řešení herního cvičení učí jednu část rozvržení; vytvoření použitelné stránky vyžaduje také kontrolu obsahu.

Používejte herní postup jako zpětnou vazbu, nikoli jako důkaz zvládnutí

Po úspěšném cvičení změňte jeden předpoklad: směr, počet položek, dostupnou šířku nebo délku textu. Předpovězte výsledek, než se podíváte. Pokud dokážete myšlenku upravit a vysvětlit změnu, naučili jste se více než jen úroveň odpovědi.

Při návratu ke hře zkontrolujte, zda otevíráte stejnou verzi a prostředí prohlížeče. Oblíbené položky účtu Cozcade identifikují hry, které si chcete znovu prohlédnout; nejsou zárukou, že se interní postup lekcí hry přenese mezi zařízeními. Během zkoumání postupu se vyhněte mazání uložených dat webu a explicitní funkci exportu používejte pouze tehdy, pokud ji daná hra nabízí.

Pokračujte s průvodcem porovnáváním

Pro procvičování os a zarovnání použijte průvodce Froggy a pro otázky týkající se umístění průvodce Grid Garden. Pokud chcete později jiný typ procvičování, projděte si učební hry.

Výše uvedená cvičení byla napsána pro tento článek. Referenční stránky byly zkontrolovány 11. října 2026. Naše zaznamenané herní kontroly zahrnují malý počet interakcí na počítači, nikoli dokončení všech úrovní ani kompletního mobilního kurzu. Tento článek učí cvičnou sekvenci; neuděluje kvalifikaci ani nenahrazuje testování vlastních rozhraní.

Hry, které si můžete zahrát na Cozcade

Flexbox FroggyGrid Garden