Tell rutenettlinjer i stedet for okkuperte celler
Les nivåets vanningsmål, og identifiser deretter linjene som avgrenset det tiltenkte området. Rutenettplassering er beskrevet med grenser og spor; et linjenummer er ikke bare nummeret til en farget celle. Før du går inn i CSS, pek på start- og sluttgrensene du ønsker. Den lille forskjellen gjør det lettere å forutsi området en regel vil dekke i stedet for å oppdage det først etter at vannet beveger seg.
Når en oppgave bruker et spenn, tenk på hvor mange spor området skal dekke. Ikke oversett det direkte til pikselavstand eller gjenbruk en flexbox-justeringsregel bare fordi begge spillene involverer CSS. Skriv inn en endring i editoren, observer det vannede området og sammenlign det med gulrøttene eller andre mål spesifisert av nivået. Den aktuelle oppgaven avgjør hva som regnes som suksess; et visuelt bredt område er ikke automatisk den tiltenkte løsningen.
Bruk formen på resultatet for å diagnostisere regelen
Hvis det vannede området starter på feil sted, inspiser den valgte startgrensen. Hvis den starter riktig, men slutter for tidlig eller for sent, inspiser enden eller spennet. Hvis det endres i feil retning, sjekk hvilken rad- eller kolonneegenskap du brukte. Å navngi den geometriske feilen gir deg en presis neste redigering og bidrar til å unngå å erstatte flere riktige deler av regelen samtidig.
Etter et vellykket forsøk, forklar hvilke linjer som omsluttet målet og hvordan regelen valgte dem. Den forklaringen viderefører bedre enn en frakoblet svarstreng fordi senere nivåer kan bruke et annet rutenett eller kombinere begrensninger. Dette senteret støtter den faktiske interaktive CSS-hagen og dens nivåinstruksjoner. Den lover ikke en pikselbasert layoutopplæring, en ekstern sertifisering eller et komplett svarark testet mot hver versjon. Bruk avspillingssiden for redigeringskontrollene, og gå tilbake hit når du vil ha en fokusert måte å se gjennom en posisjoneringsfeil på.
For eksempel, hvis vannet dekker ett spor for mye, merk den ønskede sluttgrensen og sammenlign den med verdien eller spennet du skrev inn. Hold riktig start uendret mens du reviderer slutten. Hvis resultatet flyttes til en annen rad, inspiser radregelen separat fra kolonneregelen. Når målet er dekket riktig, beskriv grensene og sporene med ord. Øvelsen er å koble CSS plassering med det synlige rutenettet, noe som er nyttig på et nytt arrangement der den forrige svarstrengen ikke lenger velger det tiltenkte området.
Grid Garden tips og strategi
Kryss av et tips for neste runde. Denne listen endrer ikke spillet og lagrer ikke fremgangen din.
Grid Garden spørsmål og svar
Hvilket emne underviser Grid Garden i?
Det gir interaktiv øvelse med CSS-rutenett gjennom hageoppsett-puslespill.
Kontrollerer jeg en bevegelig figur?
Nei. Hovedinteraksjonen er å legge inn CSS som endrer rutenettplasseringen.
Hva er den opprinnelige kilden?
Thomas Parks Grid Garden inneholder den MIT-lisensierte kilden og CC BY 3.0-grafikken som brukes i denne anmeldte utgaven.
Dekker startlinje 2 og sluttlinje 4 fire ruter?
Nei. grid-column-start: 2 og grid-column-end: 4 velger rommet mellom linje 2 og 4, altså to kolonnespor. Sluttlinjen er en grense, ikke en ekstra vannet rute. Tell mellomrommene eller bruk span 2, og sjekk markeringen før du også endrer radplasseringen.