Räkna rutnätslinjer snarare än upptagna celler
Läs nivåns vattningsmål och identifiera sedan linjerna som avgränsade det avsedda området. Rutnätsplacering beskrivs med gränser och spår; ett radnummer är inte bara numret på en färgad cell. Innan du anger CSS, peka på de start- och slutgränser du vill ha. Den lilla skillnaden gör det lättare att förutsäga området en regel kommer att täcka snarare än att upptäcka det först efter att vattnet rör sig.
När en uppgift använder ett span, tänk på hur många spår området ska täcka. Översätt inte det direkt till pixelavstånd eller återanvänd en flexbox-justeringsregel bara för att båda spelen involverar CSS. Ange en förändring i editorn, observera det vattnade området och jämför det med morötterna eller andra mål som anges av nivån. Den aktuella uppgiften avgör vad som räknas som framgång; ett visuellt brett område är inte automatiskt den avsedda lösningen.
Använd formen på resultatet för att diagnostisera regeln
Om det vattnade området börjar på fel ställe, inspektera den valda startgränsen. Om det börjar korrekt men slutar för tidigt eller för sent, inspektera slutet eller spann. Om det ändras i fel riktning, kontrollera vilken rad- eller kolumnegenskap du använde. Att namnge det geometriska felet ger dig en exakt nästa redigering och hjälper till att undvika att ersätta flera korrekta delar av regeln samtidigt.
Efter ett lyckat försök, förklara vilka rader som omslöt målet och hur regeln valde dem. Den förklaringen bär vidare bättre än en frånkopplad svarssträng eftersom senare nivåer kan använda ett annat rutnät eller kombinera begränsningar. Detta center stöder den faktiska interaktiva CSS trädgården och dess nivåinstruktioner. Det lovar inte en pixelbaserad layouthandledning, en extern certifiering eller ett komplett svarsblad som testats mot varje version. Använd spelsidan för redigeringskontrollerna och återvänd sedan hit när du vill ha ett fokuserat sätt att granska ett positioneringsmisstag.
Till exempel, om vattnet täcker ett spår för mycket, markera den önskade slutgränsen och jämför den med värdet eller spännet du angav. Håll den korrekta starten oförändrad medan du reviderar slutet. Om resultatet flyttas till en annan rad, inspektera radregeln separat från kolumnregeln. När målet är täckt korrekt, beskriv gränserna och spåren i ord. Övningen går ut på att koppla CSS placering med det synliga rutnätet, vilket är användbart på ett nytt arrangemang där den tidigare svarssträngen inte längre väljer det avsedda området.
Grid Garden tips och strategi
Markera ett tips att öva på nästa omgång. Listan ändrar inte spelet och sparar inte dina framsteg.
Grid Garden frågor och svar
Vilket ämne undervisar Grid Garden?
Det ger interaktiv övning med CSS-rutnät genom pussel med trädgårdslayouter.
Kontrollerar jag en rörlig karaktär?
Nej. Den huvudsakliga interaktionen är att ange CSS vilket ändrar rutnätets placering.
Vad är den ursprungliga källan?
Thomas Parks Grid Garden tillhandahåller den MIT-licensierade källkoden och CC BY 3.0-grafiken som används i denna recenserade utgåva.
Täcker startlinje 2 och slutlinje 4 fyra rutor?
Nej. grid-column-start: 2 och grid-column-end: 4 väljer utrymmet mellan linje 2 och 4, alltså två kolumnspår. Slutlinjen är en gräns, inte en extra vattnad ruta. Räkna mellanrummen eller använd span 2 och kontrollera markeringen innan du även ändrar raden.
Kontroller och fullständiga instruktioner
Kontroller och fullständiga instruktioner
Spela Grid Garden