CSS Grid Playground

Όλα τα εργαλεία

Συνθέστε οπτικά πρότυπα CSS Grid, κενά και τοποθέτηση, και αντιγράψτε το CSS διάταξης.

Προεπισκόπηση

Κάντε κλικ σε ένα αριθμημένο στοιχείο στο πλέγμα για να το επιλέξετε και να το επανατοποθετήσετε.

grid-template-columns —
grid-template-rows —
Παραγόμενο CSS
—
—
Στήλες
Γραμμές
Κενά
16px
16px
Στοίχιση
Στοιχεία πλέγματος
Στοιχείο 1
Προεπιλογές

Σχετικά με το CSS Grid Playground

Το CSS Grid Playground συνθέτει πραγματικές διατάξεις πλέγματος οπτικά. Προσθέστε και αφαιρέστε στήλες και γραμμές για να διαμορφώσετε τα grid-template-columns και grid-template-rows, ορίστε τα κενά στηλών και γραμμών, και ρυθμίστε και τις τέσσερις ιδιότητες στοίχισης — justify-items, align-items, justify-content και align-content — ενώ η προεπισκόπηση αντικατοπτρίζει κάθε αλλαγή άμεσα.

Η τοποθέτηση στοιχείων είναι εκεί όπου τα πλέγματα γίνονται ισχυρά: προσθέστε στοιχεία, κάντε κλικ σε ένα από αυτά στην προεπισκόπηση για να το επιλέξετε, και τοποθετήστε το με column start, column span, row start και row span. Έτσι δημιουργούνται πλαϊνές μπάρες, κεφαλίδες και κελιά χαρακτηριστικών που εκτείνονται σε πολλά κομμάτια — η τεχνική πίσω από σχεδόν κάθε πραγματική διάταξη πλέγματος.

Τρία προκαθορισμένα πρότυπα — holy grail, dashboard και gallery — φορτώνουν κλασικές δομές σελίδας που μπορείτε να αναλύσετε και να προσαρμόσετε. Όταν η διάταξη είναι σωστή, αντιγράψτε το παραγόμενο CSS, που περιέχει τους πλήρεις κανόνες του container πλέγματος και την τοποθέτηση κάθε στοιχείου.

Πώς να χρησιμοποιήσετε το CSS Grid Playground

  1. Προσθέστε ή αφαιρέστε στήλες και γραμμές για να ορίσετε το πρότυπο πλέγματος.
  2. Ορίστε το κενό στηλών και το κενό γραμμών.
  3. Προσαρμόστε τα στοιχεία στοίχισης: justify-items, align-items, justify-content και align-content.
  4. Προσθέστε στοιχεία, κάντε κλικ σε ένα στην προεπισκόπηση, και ορίστε την έναρξη/εύρος στηλών και γραμμών του για να το τοποθετήσετε.
  5. Φορτώστε το πρότυπο holy grail, dashboard ή gallery για να μελετήσετε μια κλασική διάταξη.
  6. Αντιγράψτε το παραγόμενο CSS στο stylesheet σας.

Συχνές ερωτήσεις

Το justify-items στοιχίζει κάθε στοιχείο μέσα στο δικό του κελί πλέγματος· το justify-content στοιχίζει ολόκληρο το πλέγμα μέσα στον container όταν τα κομμάτια δεν το γεμίζουν. Η ίδια διάκριση ισχύει κάθετα με το align-items έναντι του align-content.

Επιλέξτε το στοιχείο και αυξήστε το column span του — η έξοδος CSS χρησιμοποιεί grid-column με τιμή span. Σε συνδυασμό με ένα row span μπορείτε να δημιουργήσετε μπάρες κεφαλίδας, πλαϊνές μπάρες και μεγάλα κελιά χαρακτηριστικών μέσα στο ίδιο πλέγμα.

Ο κλασικός σκελετός σελίδας: κεφαλίδα και υποσέλιδο πλήρους πλάτους με τρεις στήλες ανάμεσά τους — πλοήγηση, κύριο περιεχόμενο και μια πλαϊνή στήλη. Ήταν διαβόητα δύσκολη με floats· το προκαθορισμένο πρότυπο δείχνει πώς λίγες τοποθετήσεις πλέγματος τη λύνουν καθαρά.

Το Grid υπερτερεί σε δισδιάστατες διατάξεις όπου γραμμές και στήλες πρέπει να ευθυγραμμίζονται — σκελετός σελίδας, dashboards, γκαλερί. Το Flexbox είναι καλύτερο για μονοδιάστατες ροές όπως γραμμές εργαλείων και μενού. Συνδυάζονται καλά: grid για τη σελίδα, flex μέσα στα components.

Ναι, είναι δωρεάν και βασισμένο στον browser — πειραματιστείτε όσο θέλετε, και τίποτα από όσα δημιουργείτε δεν φεύγει από τον υπολογιστή σας.
Κοινοποίηση
Σχετικά Εργαλεία
Δημιουργός Υπογραφής Email Σχεδιάστε μια επαγγελματική υπογραφή email HTML από 30 πρότυπα, προσαρμόστε την και αποθηκεύστε την. Δωρεάν
Εικονίδιο σε PNG Μετατρέψτε Bootstrap Icons, Font Awesome και άλλα σε προσαρμοσμένες PNG εικόνες — δωρεάν, στον περιηγητή σας. Δωρεάν
Δημιουργός εικονιδίων εφαρμογών Δημιουργήστε ένα πλήρες, έτοιμο για δημοσίευση σετ εικονιδίων εφαρμογής για το App Store και το Google Play — εξαιρετικά φόντα διαβάθμισης, mesh και μοτίβων, φτιαγμένα από το λογότυπό σας. Δωρεάν
Δημιουργός Favicon Δημιουργήστε ένα πλήρες πακέτο favicon από ένα λογότυπο, ένα εικονίδιο γραμματοσειράς ή ένα μονόγραμμα — favicon.ico, σύγχρονα PNG, εικονίδιο Apple touch, εικονίδια PWA, manifest ιστού και απόσπασμα HTML. Δωρεάν
Γεννήτρια CSS Box Shadow Δημιουργήστε CSS box-shadows πολλαπλών επιπέδων με ζωντανούς ολισθητές για offset, blur, spread, χρώμα, αδιαφάνεια και inset — κάντε προεπισκόπηση σε πραγματικό στοιχείο και αντιγράψτε έτοιμο CSS άμεσα. Δωρεάν
Γεννήτρια CSS Border Radius Σχεδιάστε οπτικά το CSS border-radius με ζωντανή προεπισκόπηση και αντιγράψτε έτοιμο για παραγωγή κώδικα. Δωρεάν
Δημοφιλείς αναζητήσεις
γεννήτρια css grid css grid playground γεννήτρια grid-template-columns γεννήτρια διάταξης css grid δημιουργός grid-template-areas εργαλείο css grid gap οπτικοποιητής css grid
Χρειάζεστε βοήθεια;
Βρήκατε πρόβλημα με αυτό το εργαλείο; Ενημερώστε μας.
Αναφορά προβλήματος

Προσθέστε αυτό το δωρεάν εργαλείο στον δικό σας ιστότοπο — αντιγράψτε και επικολλήστε τον παρακάτω κώδικα.