Conta le linee della griglia anziché le celle occupate
Leggere l'obiettivo di irrigazione del livello, quindi individuare le linee che delimitano l'area prevista. Il posizionamento della griglia è descritto con confini e tracce; un numero di riga non è semplicemente il numero di una cella colorata. Prima di inserire CSS, seleziona i confini di inizio e fine desiderati. Questa piccola distinzione rende più semplice prevedere l’area che una regola coprirà piuttosto che scoprirla solo dopo che l’acqua si sarà mossa.
Quando un'attività utilizza un intervallo, pensa a quante tracce l'area dovrebbe coprire. Non tradurlo direttamente in distanza in pixel o riutilizzare una regola di allineamento flexbox semplicemente perché entrambi i giochi coinvolgono CSS. Inserisci una modifica nell'editor, osserva l'area irrigata e confrontala con le carote o altri obiettivi specificati dal livello. L'attività corrente decide cosa conta come successo; un'area visivamente ampia non è automaticamente la soluzione prevista.
Utilizza la forma del risultato per diagnosticare la regola
Se la regione irrigata inizia nel posto sbagliato, controlla il confine iniziale scelto. Se inizia correttamente ma termina troppo presto o troppo tardi, ispeziona la fine o l'intervallo. Se cambia nella direzione sbagliata, controlla quale proprietà di riga o colonna hai utilizzato. Dare un nome all'errore geometrico ti dà una modifica successiva precisa e aiuta a evitare di sostituire più parti corrette della regola contemporaneamente.
Dopo un tentativo riuscito, spiegare quali righe racchiudevano l'obiettivo e come la regola le ha selezionate. Questa spiegazione è migliore di una stringa di risposta sconnessa perché i livelli successivi possono utilizzare una griglia diversa o combinare vincoli. Questo centro supporta l'attuale giardino interattivo CSS e le relative istruzioni di livello. Non promette un tutorial sul layout basato su pixel, una certificazione esterna o un foglio di risposte completo testato con ogni versione. Utilizza la pagina di riproduzione per i controlli dell'editor, quindi torna qui quando desideri un modo mirato per rivedere un errore di posizionamento.
Ad esempio, se l'acqua copre una traccia di troppo, contrassegna il confine finale desiderato e confrontalo con il valore o l'intervallo inserito. Mantieni invariato l'inizio corretto mentre rivedi la fine. Se il risultato si sposta su una riga diversa, controlla la regola della riga separatamente dalla regola della colonna. Quando il bersaglio è coperto correttamente, descrivi i confini e le tracce a parole. L'esercizio consiste nel collegare il posizionamento CSS con la griglia visibile, il che è utile in una nuova disposizione in cui la stringa di risposta precedente non seleziona più l'area prevista.
Suggerimenti e strategie per Grid Garden
Seleziona un consiglio da provare nella prossima partita. Questo elenco non modifica il gioco né salva i progressi.
Domande e risposte sul modello Grid Garden
Quale argomento tratta il corso Grid Garden?
Offre un esercizio interattivo con la griglia CSS attraverso puzzle di layout da giardino.
Controllo un personaggio in movimento?
No. L'interazione principale consiste nell'inserire CSS, che modifica il posizionamento sulla griglia.
Qual è la fonte originale?
Il codice sorgente con licenza MIT è fornito da Grid Garden di Thomas Park, mentre l'artwork di CC BY 3.0 è utilizzato in questa edizione recensita.
Partire dalla linea 2 e finire alla 4 copre quattro celle?
No. grid-column-start: 2 e grid-column-end: 4 selezionano lo spazio tra le linee 2 e 4: due tracce di colonna. La linea finale è un confine, non un’altra cella annaffiata. Conta gli intervalli oppure usa span 2, poi verifica l’area evidenziata prima di cambiare anche la riga.