Γεννήτρια CSS Grid
Ορίστε τις στήλες και τις σειρές σας, σύρετε το ποντίκι στα κελιά για να τοποθετήσετε στοιχεία και αντιγράψτε το CSS και το HTML με ένα κλικ.
Το πλέγμα σας δημιουργείται απευθείας στον περιηγητή σας. Καμία από τις ρυθμίσεις σας δεν μεταφορτώνεται στο BroBroGo.
Συχνές Ερωτήσεις
Πώς τοποθετώ στοιχεία στο πλέγμα (grid);
Κάντε κλικ και σύρετε το ποντίκι πάνω από τα κελιά για να σχεδιάσετε ένα ορθογώνιο — όταν το αφήσετε, θα γίνει ένα τοποθετημένο θυγατρικό στοιχείο που εκτείνεται σε αυτές τις στήλες και σειρές. Κάθε στοιχείο που σχεδιάζετε αποκτά τους δικούς του κανόνες grid-column και grid-row στο CSS και ένα αντίστοιχο div στο HTML. Τα στοιχεία μπορούν να επικαλύπτονται, και αυτό που σχεδιάζεται αργότερα εμφανίζεται από πάνω. Χρησιμοποιήστε το «×» σε ένα στοιχείο για να το αφαιρέσετε.
Μπορούν οι στήλες και οι σειρές να έχουν διαφορετικά μεγέθη;
Ναι. Κάθε γραμμή/στήλη (track) έχει το δικό της πεδίο μεγέθους, όπου μπορείτε να πληκτρολογήσετε οποιαδήποτε έγκυρη τιμή grid — 1fr, 200px, auto, min-content ή minmax(120px, 1fr). Οι γραμμές ή στήλες που μοιράζονται το ίδιο μέγεθος ομαδοποιούνται στη συνάρτηση repeat() για να παραμένει ο κώδικας σύντομος. Τα κενά στηλών (column gap) και σειρών (row gap) ορίζονται ξεχωριστά και συγχωνεύονται σε ένα απλό gap όταν οι τιμές τους συμπίπτουν.
Τι κάνω με τον παραγόμενο κώδικα;
Αντιγράψτε το CSS και το HTML δίπλα-δίπλα. Το HTML σάς παρέχει τον περιέκτη με ένα div για κάθε στοιχείο, και το CSS ορίζει το πλέγμα και τοποθετεί το κάθε στοιχείο. Επικολλήστε και τα δύο στο έργο σας και θα έχετε την ίδια ακριβώς διάταξη που σχεδιάσατε εδώ.