Μετρήστε τις γραμμές πλέγματος αντί των κατειλημμένων κελιών
Διαβάστε τον στόχο ποτίσματος της στάθμης και, στη συνέχεια, προσδιορίστε τις γραμμές που περιείχαν την επιδιωκόμενη περιοχή. Η τοποθέτηση πλέγματος περιγράφεται με όρια και ίχνη. ένας αριθμός γραμμής δεν είναι απλώς ο αριθμός ενός έγχρωμου κελιού. Πριν εισαγάγετε το CSS, τοποθετήστε το δείκτη στα όρια έναρξης και λήξης που θέλετε. Αυτή η μικρή διάκριση διευκολύνει την πρόβλεψη της περιοχής που θα καλύψει ένας κανόνας αντί να την ανακαλύψετε μόνο μετά την κίνηση του νερού.
Όταν μια εργασία χρησιμοποιεί ένα διάστημα, σκεφτείτε πόσα κομμάτια πρέπει να καλύπτει η περιοχή. Μην το μεταφράζετε απευθείας σε απόσταση pixel ή μην επαναχρησιμοποιείτε έναν κανόνα ευθυγράμμισης flexbox απλώς και μόνο επειδή και τα δύο παιχνίδια περιλαμβάνουν CSS. Εισαγάγετε μία αλλαγή στο πρόγραμμα επεξεργασίας, παρατηρήστε την ποτισμένη περιοχή και συγκρίνετε την με τα καρότα ή άλλους στόχους που καθορίζονται από το επίπεδο. Η τρέχουσα εργασία αποφασίζει τι μετράει ως επιτυχία. μια οπτικά ευρεία περιοχή δεν είναι αυτόματα η επιδιωκόμενη λύση.
Χρησιμοποιήστε το σχήμα του αποτελέσματος για να διαγνώσετε τον κανόνα
Εάν η ποτισμένη περιοχή ξεκινά από λάθος μέρος, επιθεωρήστε το επιλεγμένο όριο εκκίνησης. Εάν ξεκινά σωστά αλλά τελειώνει πολύ νωρίς ή πολύ αργά, επιθεωρήστε το άκρο ή το εύρος. Εάν αλλάξει προς τη λάθος κατεύθυνση, ελέγξτε ποια ιδιότητα γραμμής ή στήλης χρησιμοποιήσατε. Η ονομασία του γεωμετρικού σφάλματος σάς παρέχει μια ακριβή επόμενη τροποποίηση και σας βοηθά να αποφύγετε την ταυτόχρονη αντικατάσταση πολλών σωστών τμημάτων του κανόνα.
Μετά από μια επιτυχημένη προσπάθεια, εξηγήστε ποιες γραμμές περιείχαν τον στόχο και πώς τις επέλεξε ο κανόνας. Αυτή η εξήγηση μεταφέρεται καλύτερα από μια αποσυνδεδεμένη συμβολοσειρά απαντήσεων, επειδή τα μεταγενέστερα επίπεδα μπορούν να χρησιμοποιήσουν διαφορετικό πλέγμα ή να συνδυάσουν περιορισμούς. Αυτό το κέντρο υποστηρίζει τον πραγματικό διαδραστικό κήπο CSS και τις οδηγίες του επιπέδου του. Δεν υπόσχεται ένα σεμινάριο διάταξης βασισμένο σε εικονοστοιχεία, μια εξωτερική πιστοποίηση ή ένα πλήρες φύλλο απαντήσεων δοκιμασμένο σε κάθε έκδοση. Χρησιμοποιήστε τη σελίδα αναπαραγωγής για τα στοιχεία ελέγχου του προγράμματος επεξεργασίας και, στη συνέχεια, επιστρέψτε εδώ όταν θέλετε έναν εστιασμένο τρόπο για να ελέγξετε ένα λάθος τοποθέτησης.
Για παράδειγμα, αν το νερό καλύπτει ένα κομμάτι πάρα πολλά, σημειώστε το επιθυμητό τελικό όριο και συγκρίνετε το με την τιμή ή το εύρος που εισαγάγατε. Διατηρήστε τη σωστή αρχή αμετάβλητη ενώ αναθεωρείτε το τέλος. Εάν το αποτέλεσμα μετακινηθεί σε διαφορετική γραμμή, επιθεωρήστε τον κανόνα γραμμής ξεχωριστά από τον κανόνα στήλης. Όταν ο στόχος καλύπτεται σωστά, περιγράψτε τα όρια και τα ίχνη με λέξεις. Η άσκηση είναι να συνδέσετε την τοποθέτηση CSS με το ορατό πλέγμα, το οποίο είναι χρήσιμο σε μια νέα διάταξη όπου η προηγούμενη συμβολοσειρά απάντησης δεν επιλέγει πλέον την περιοχή που θέλετε.
Συμβουλές και στρατηγική για το Grid Garden
Σημείωσε μια συμβουλή για τον επόμενο γύρο. Αυτή η λίστα δεν αλλάζει το παιχνίδι ούτε αποθηκεύει την πρόοδό σου.
Ερωτήσεις και απαντήσεις για το Grid Garden
Ποιο θέμα διδάσκει το Grid Garden;
Παρέχει διαδραστική εξάσκηση με το πλέγμα CSS μέσω παζλ διάταξης κήπου.
Ελέγχω έναν κινούμενο χαρακτήρα;
Όχι. Η κύρια αλληλεπίδραση είναι η εισαγωγή του CSS που αλλάζει την τοποθέτηση του πλέγματος.
Ποια είναι η αρχική πηγή;
Το Grid Garden του Thomas Park παρέχει τον πηγαίο κώδικα με άδεια MIT και το γραφικό του CC BY 3.0 που χρησιμοποιείται σε αυτήν την αναθεωρημένη έκδοση.
Αρχή στη γραμμή 2 και τέλος στη 4 καλύπτουν τέσσερα κελιά;
Όχι. Τα grid-column-start: 2 και grid-column-end: 4 επιλέγουν τον χώρο μεταξύ γραμμών 2 και 4: δύο διαδρομές στηλών. Η τελική γραμμή είναι όριο, όχι επιπλέον ποτισμένο κελί. Μετρήστε διαστήματα ή χρησιμοποιήστε span 2 και ελέγξτε την επισήμανση πριν αλλάξετε και τη σειρά.