Compter les lignes du quadrillage plutôt que les cellules occupées
Lire l'objectif d'arrosage du niveau, puis identifier les lignes qui délimitent la zone prévue. Le placement de la grille est décrit avec des limites et des pistes ; un numéro de ligne n’est pas simplement le numéro d’une cellule colorée. Avant de saisir CSS, pointez sur les limites de début et de fin souhaitées. Cette petite distinction permet de prédire plus facilement la zone qu’une règle couvrira plutôt que de la découvrir seulement après le mouvement de l’eau.
Lorsqu'une tâche utilise un span, pensez au nombre de pistes que la zone doit couvrir. Ne traduisez pas cela directement en distance en pixels et ne réutilisez pas une règle d'alignement flexbox simplement parce que les deux jeux impliquent CSS. Entrez un changement dans l'éditeur, observez la zone arrosée et comparez-la avec les carottes ou autres cibles spécifiées par le niveau. La tâche en cours décide de ce qui compte comme succès ; une zone visuellement large n’est pas automatiquement la solution envisagée.
Utiliser la forme du résultat pour diagnostiquer la règle
Si la zone arrosée démarre au mauvais endroit, inspectez la limite de départ choisie. S'il démarre correctement mais se termine trop tôt ou trop tard, inspectez la fin ou la travée. Si cela change dans la mauvaise direction, vérifiez quelle propriété de ligne ou de colonne vous avez utilisée. Nommer l'erreur géométrique vous donne une prochaine modification précise et permet d'éviter de remplacer plusieurs parties correctes de la règle à la fois.
Après une tentative réussie, expliquez quelles lignes encadraient la cible et comment la règle les a sélectionnées. Cette explication est meilleure qu'une chaîne de réponse déconnectée, car les niveaux ultérieurs peuvent utiliser une grille différente ou combiner des contraintes. Ce centre prend en charge le véritable jardin interactif CSS et ses instructions de niveau. Il ne promet pas de didacticiel de mise en page basé sur les pixels, de certification externe ou de feuille de réponses complète testée pour chaque version. Utilisez la page de lecture pour les commandes de l'éditeur, puis revenez ici lorsque vous souhaitez un moyen ciblé d'examiner une erreur de positionnement.
Par exemple, si l'eau recouvre une piste de trop, marquez la limite finale souhaitée et comparez-la avec la valeur ou l'étendue que vous avez saisie. Gardez le début correct inchangé tout en révisant la fin. Si le résultat est déplacé vers une autre ligne, inspectez la règle de ligne séparément de la règle de colonne. Lorsque la cible est correctement couverte, décrivez les limites et les pistes avec des mots. L'exercice consiste à relier le placement CSS à la grille visible, ce qui est utile sur un nouvel agencement où la chaîne de réponse précédente ne sélectionne plus la zone souhaitée.
Conseils et stratégie pour la Grid Garden
Cochez un conseil à travailler lors de votre prochaine partie. Cette liste ne modifie pas le jeu et ne sauvegarde pas votre progression.
Questions et réponses concernant le Grid Garden
Quels sont les sujets abordés par le Grid Garden ?
Il propose une pratique interactive avec la grille CSS à travers des puzzles d'aménagement de jardin.
Est-ce que je contrôle un personnage en mouvement ?
Non. L'interaction principale consiste à entrer dans CSS, ce qui modifie le placement de la grille.
Quelle est la source originale ?
Le fichier Thomas Park's Grid Garden fournit le code source sous licence MIT et les illustrations CC BY 3.0 utilisées dans cette édition analysée.
Un début à la ligne 2 et une fin à la ligne 4 couvrent-ils quatre cases ?
Non. grid-column-start: 2 et grid-column-end: 4 sélectionnent l’espace entre les lignes 2 et 4, soit deux pistes de colonnes. La ligne de fin est une limite, pas une case arrosée supplémentaire. Comptez les intervalles ou utilisez span 2, puis vérifiez la zone avant de modifier aussi les lignes.
Commandes et instructions complètes
Commandes et instructions complètes
Jouer à Grid Garden