Počítejte spíše řádky mřížky než obsazené buňky
Přečtěte si cíl zavlažování úrovně a poté identifikujte linie, které ohraničují zamýšlenou oblast. Umístění mřížky je popsáno s hranicemi a stopami; číslo řádku není pouze číslo barevné buňky. Před zadáním CSS ukažte na požadovanou počáteční a koncovou hranici. Tento malý rozdíl usnadňuje předvídat oblast, kterou pravidlo pokryje, než ji objevovat až poté, co se voda pohne.
Když úkol používá rozpětí, přemýšlejte o tom, kolik stop by měla oblast pokrývat. Nepřekládejte to přímo na vzdálenost pixelů ani znovu nepoužívejte pravidlo zarovnání flexboxu pouze proto, že obě hry zahrnují CSS. Zadejte do editoru jednu změnu, pozorujte zavlažovanou oblast a porovnejte ji s mrkví nebo jinými cíli určenými úrovní. Aktuální úkol rozhoduje o tom, co se počítá jako úspěch; vizuálně široká oblast není automaticky zamýšleným řešením.
Použijte tvar výsledku k diagnostice pravidla
Pokud zalévaná oblast začíná na nesprávném místě, zkontrolujte vybranou počáteční hranici. Pokud začíná správně, ale končí příliš brzy nebo příliš pozdě, zkontrolujte konec nebo rozpětí. Pokud se změní ve špatném směru, zkontrolujte, kterou vlastnost řádku nebo sloupce jste použili. Pojmenování geometrické chyby vám poskytne přesnou další úpravu a pomůže vyhnout se nahrazení několika správných částí pravidla najednou.
Po úspěšném pokusu vysvětlete, které řádky obklopovaly cíl a jak je pravidlo vybralo. Toto vysvětlení se přenáší lépe než odpojený řetězec odpovědí, protože pozdější úrovně mohou používat jinou mřížku nebo kombinovat omezení. Toto centrum podporuje aktuální interaktivní zahradu CSS a pokyny pro její úrovně. Neslibuje výukový program rozvržení na základě pixelů, externí certifikaci nebo kompletní odpovědní list testovaný proti každé verzi. Použijte stránku přehrávání pro ovládací prvky editoru a poté se sem vraťte, až budete chtít cíleně zkontrolovat chybu umístění.
Pokud například voda pokrývá jednu stopu příliš mnoho, označte požadovanou koncovou hranici a porovnejte ji s hodnotou nebo rozpětím, které jste zadali. Při revizi konce ponechte správný začátek nezměněný. Pokud se výsledek přesune do jiného řádku, zkontrolujte pravidlo řádku odděleně od pravidla sloupce. Když je cíl správně pokryt, popište hranice a stopy slovy. Cvičení je propojit umístění CSS s viditelnou mřížkou, což je užitečné v novém uspořádání, kde předchozí řetězec odpovědí již nevybírá zamýšlenou oblast.
Tipy a strategie pro Grid Garden
Označte tip pro příští hru. Tento seznam nemění hru ani neukládá herní postup.
Otázky a odpovědi k Grid Garden
Jaké téma Grid Garden vyučuje?
Nabízí interaktivní procvičování s mřížkou CSS prostřednictvím hádanek s rozvržením zahrady.
Ovládám pohyblivou postavu?
Ne. Hlavní interakcí je zadání CSS, které změní umístění mřížky.
Jaký je původní zdroj?
Thomas Park Grid Garden poskytuje zdrojový kód s licencí MIT a grafiku CC BY 3.0 použitou v tomto recenzovaném vydání.
Pokryje začátek na čáře 2 a konec na čáře 4 čtyři buňky?
Ne. grid-column-start: 2 a grid-column-end: 4 vyberou prostor mezi čárami 2 a 4, tedy dvě sloupcové dráhy. Koncová čára je hranice, ne další zalévaná buňka. Spočítejte mezery nebo použijte span 2 a ověřte zvýraznění před změnou řádku.