Τι είναι το Δημιουργός CSS Grid;

Δωρεάν διαδικτυακός δημιουργός CSS Grid. Δημιουργήστε και προσαρμόστε διατάξεις CSS Grid με οπτικό επεξεργαστή.

Το CSS Grid είναι ένα ισχυρό σύστημα διάταξης 2D που σας επιτρέπει να τακτοποιείτε περιεχόμενο σε γραμμές και στήλες ταυτόχρονα, καθιστώντας το ιδανικό για σύνθετες διατάξεις σελίδων, πίνακες ελέγχου (dashboards) και responsive σχέδια. Το CSS Grid Generator παρέχει μια οπτική διεπαφή για τη δημιουργία διατάξεων grid χωρίς να γράφετε CSS με το χέρι, με ζωντανή προεπισκόπηση που ενημερώνεται καθώς προσαρμόζετε τις ρυθμίσεις.

Ορίστε τον αριθμό στηλών (1-12) και γραμμών (1-12) χρησιμοποιώντας ρυθμιστικά. Κάθε συνδυασμός δείχνει μια άμεση προεπισκόπηση με αριθμημένα κελιά που αντιπροσωπεύουν τα στοιχεία του grid σας. Τα χειριστήρια απόστασης στηλών και γραμμών σάς επιτρέπουν να προσθέσετε κενά μεταξύ των κελιών του grid, από 0 έως 50 pixels. Προσαρμόστε τα και δείτε τα κελιά της προεπισκόπησης να αραιώνουν ή να πυκνώνουν.

Τα χειριστήρια στοίχισης ορίζουν το justify-items (οριζόντια στοίχιση μέσα σε κάθε κελί) και το align-items (κατακόρυφη στοίχιση μέσα σε κάθε κελί). Οι επιλογές περιλαμβάνουν start, end, center, stretch και baseline. Αυτές οι ιδιότητες ελέγχουν πώς τοποθετείται το περιεχόμενο μέσα σε κάθε κελί του grid — για παράδειγμα, κεντράροντας το κείμενο οριζόντια και κατακόρυφα μέσα σε μια περιοχή grid για μια κάρτα πίνακα ελέγχου.

Η παραγόμενη έξοδος CSS περιλαμβάνει τις ιδιότητες grid-template-columns, grid-template-rows, gap, justify-items και align-items σε μορφή έτοιμη για αντιγραφή. Η προεπισκόπηση χρησιμοποιεί αριθμημένα κελιά, ώστε να μπορείτε να επαληθεύσετε ότι ο αριθμός γραμμών και στηλών ταιριάζει με τη διάταξη που σκοπεύετε. Το CSS Grid υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης και είναι η συνιστώμενη προσέγγιση για διατάξεις σελίδων 2D, αντικαθιστώντας παλαιότερες μεθόδους, όπως διατάξεις που βασίζονται σε float και σύνθετες ένθετες flexbox.