Αρχική σελίδα » Εργαλειοθήκη » Μάθετε πώς οι ιδιότητες πλέγματος CSS λειτουργούν με το Griddy.io

    Μάθετε πώς οι ιδιότητες πλέγματος CSS λειτουργούν με το Griddy.io

    Αν συμβαδίζετε με την τεχνολογία σχεδιασμού ιστοσελίδων τότε θα πρέπει να γνωρίζετε για τα δίκτυα CSS. Αυτές οι ιδιότητες είναι νέες προσθήκες στη μορφή CSS3 και γίνονται γρήγορα ο καλύτερος φίλος του προγραμματιστή.

    Πρόσφατα κάλυψαμε ένα διασκεδαστικό παιχνίδι για να σας βοηθήσουμε να μάθετε τις ιδιότητες του δικτύου CSS, αλλά τα παιχνίδια δεν δίνουν πάντα πρακτικές ιδέες. Αυτό είναι όπου ο Griddy μπορεί να είναι πιο χρήσιμος.

    Αυτό το δωρεάν webapp σας επιτρέπει να προσαρμόσετε πλέγματα σε πραγματικό χρόνο και να ενημερώσετε ζωντανά αποσπάσματα στη σελίδα. Μπορείτε να χαλαρώσετε με το δικό σας προσαρμοσμένο πλέγμα, καθορίζοντας στήλες, υδρορροές και περιθώρια και αναδιαμορφώνοντας τη σελίδα για να μάθετε πώς λειτουργούν οι ιδιότητες του πλέγματος.

    Ο Griddy είναι στην πραγματικότητα ένα δωρεάν εργαλείο εκμάθησης που δημιουργήθηκε για προγραμματιστές frontend που θέλουν να καταλάβουν περισσότερα για τα δίκτυα CSS.

    Με αυτό το webapp μπορείτε να προσθέσετε νέα στοιχεία στο πλέγμα, να αφαιρέσετε άλλα στοιχεία και να τα αλλάξετε σε μέγεθος ώστε να χωρέσουν σε οποιαδήποτε διάταξη θέλετε.

    Το webapp έχει διαφορετικές ενότητες με διαφορετικά πεδία εισαγωγής για επεξεργασία ιδιοτήτων πλέγματος. Αυτά σας επιτρέπουν να αναδιαμορφώσετε τις σειρές πλέγματος / στήλες και σας διδάσκουν ακριβώς τι κάνετε στην πορεία.

    Μπορείτε να ορίσετε κενά στη στήλη, να ευθυγραμμίσετε τα στοιχεία πλέγματος και να παίξετε με τις ρυθμίσεις αιτιολόγησης - όλα αυτά μέσα από αυτά τα πεδία φόρμας. Κάθε φορά που κάνετε μια αλλαγή, θα ενημερωθεί αυτόματα το απόσπασμα προεπισκόπησης και το απόσπασμα μικρού κώδικα από κάτω.

    Με αυτό τον τρόπο μπορείτε απλά να αντιγράψετε και να επικολλήσετε το CSS στο δικό σας φύλλο στυλ, αν θέλετε να το χρειαστείτε. Πολύ ωραίο!

    Το Griddy μπορεί να μην είναι τόσο διασκεδαστικό όσο το Grid Garden, αλλά το Griddy είναι ένας πρακτικός τρόπος για να μάθετε και κατανοήσουν οπτικά πώς οι ιδιότητες πλέγματος CSS επηρεάζουν τα στοιχεία σελίδας.

    Για να παίξετε μαζί του, επισκεφθείτε την αρχική σελίδα του Griddy. Μπορείτε επίσης να μοιραστείτε τις σκέψεις ή τις ερωτήσεις σας με τον δημιουργό στο Twitter @drewisthe.