Tæl gitterlinjer i stedet for besatte celler
Læs niveauets vandingsmål, og identificer derefter linjerne, der afgrænser det tilsigtede område. Gitterplacering er beskrevet med grænser og spor; et linjenummer er ikke blot nummeret på en farvet celle. Før du indtaster CSS, skal du pege på de start- og slutgrænser, du ønsker. Den lille skelnen gør det nemmere at forudsige det område, en regel vil dække i stedet for først at opdage det, når vandet bevæger sig.
Når en opgave bruger et spænd, så tænk på, hvor mange spor området skal dække. Oversæt det ikke direkte til pixelafstand eller genbrug en flexbox-justeringsregel, blot fordi begge spil involverer CSS. Indtast en ændring i editoren, observer det vandede område og sammenlign det med gulerødderne eller andre mål, der er angivet af niveauet. Den aktuelle opgave afgør, hvad der tæller som succes; et visuelt bredt område er ikke automatisk den påtænkte løsning.
Brug formen på resultatet til at diagnosticere reglen
Hvis det vandede område starter det forkerte sted, skal du inspicere den valgte startgrænse. Hvis den starter korrekt, men slutter for tidligt eller for sent, skal du inspicere enden eller spændvidden. Hvis det ændrer sig i den forkerte retning, skal du kontrollere, hvilken række- eller kolonneegenskab du brugte. Navngivning af den geometriske fejl giver dig en præcis næste redigering og hjælper med at undgå at erstatte flere korrekte dele af reglen på én gang.
Efter et vellykket forsøg, forklar hvilke linjer der omsluttede målet, og hvordan reglen valgte dem. Denne forklaring bærer bedre videre end en afbrudt svarstreng, fordi senere niveauer kan bruge et andet gitter eller kombinere begrænsninger. Dette center understøtter den faktiske interaktive CSS have og dens niveauinstruktioner. Det lover ikke en pixel-baseret layout-tutorial, en ekstern certificering eller et komplet svarark testet mod hver version. Brug afspilningssiden til editorens kontroller, og vend derefter tilbage hertil, når du ønsker en fokuseret måde at gennemgå en positioneringsfejl på.
For eksempel, hvis vandet dækker et spor for meget, skal du markere den ønskede slutgrænse og sammenligne den med den værdi eller det spænd, du indtastede. Hold den korrekte start uændret, mens du reviderer slutningen. Hvis resultatet flyttes til en anden række, skal du inspicere rækkereglen separat fra kolonnereglen. Når målet er dækket korrekt, beskriv grænserne og sporene i ord. Øvelsen er at forbinde CSS placering med det synlige gitter, hvilket er nyttigt på et nyt arrangement, hvor den forrige svarstreng ikke længere vælger det tilsigtede område.
Grid Garden tips og strategi
Markér et tip til din næste runde. Listen ændrer ikke spillet og gemmer ikke dine fremskridt.
Grid Garden spørgsmål og svar
Hvilket emne underviser Grid Garden i?
Det giver interaktiv øvelse med CSS-gitter gennem havelayout-puslespil.
Styrer jeg en figur i bevægelse?
Nej. Den primære interaktion er at indtaste CSS, hvilket ændrer gitterplaceringen.
Hvad er den oprindelige kilde?
Thomas Park's Grid Garden leverer den MIT-licenserede kilde og CC BY 3.0-illustrationer, der er brugt i denne anmeldte udgave.
Dækker startlinje 2 og slutlinje 4 fire felter?
Nej. grid-column-start: 2 og grid-column-end: 4 vælger rummet mellem linje 2 og 4: to kolonnespor. Slutlinjen er en grænse, ikke et ekstra vandet felt. Tæl mellemrummene eller brug span 2, og kontrollér markeringen, før du også ændrer rækkeplaceringen.