Γεννήτρια CSS Grid
Σχεδιάστε οπτικά διατάξεις CSS Grid: ορίστε στήλες, γραμμές και κενό και μετά πληκτρολογήστε ονόματα περιοχών στα κελιά για να δημιουργήσετε grid-template-areas — με ζωντανή προεπισκόπηση και αντιγράψιμο κώδικα CSS και HTML.
🔒 Επεξεργάζεται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας — τίποτα που εισάγετε εδώ δεν μεταφορτώνεται ποτέ.
Αποτέλεσμα
Μια δήλωση grid-template-areas είναι ένα από τα πιο ευανάγνωστα κομμάτια CSS που υπάρχουν, αλλά μόνο αφού δημιουργηθεί — το να φτάσετε εκεί με το χέρι σημαίνει να μετράτε συμβολοσειρές με εισαγωγικά και να ταιριάζετε μήκη γραμμών, και ένα αταίριαστο κελί σπάει σιωπηλά ολόκληρη τη διάταξη. Αυτή η γεννήτρια το μετατρέπει σε άμεσο χειρισμό: ορίστε τον αριθμό στηλών και γραμμών, πληκτρολογήστε ένα όνομα σε οποιοδήποτε κελί του ζωντανού πλέγματος και τα αντίστοιχα ονόματα συγχωνεύονται αυτόματα σε μία ονομασμένη περιοχή.
Στο παρασκήνιο, κάθε κελί που αφήνετε κενό γίνεται μια τελεία στην παραγόμενη συμβολοσειρά grid-template-areas και κάθε κελί που ονομάζετε γίνεται μέρος του ορθογωνίου αυτού του ονόματος. Η CSS επιτρέπει σε μια ονομασμένη περιοχή να καταλαμβάνει μόνο ένα καθαρό ορθογώνιο μπλοκ, επομένως το εργαλείο το ελέγχει καθώς πληκτρολογείτε και σας λέει ακριβώς πότε ένα όνομα δεν σχηματίζει ακόμα έγκυρο ορθογώνιο — αντί να παράγει σιωπηλά CSS που ο browser θα απορρίψει.
Το κενό στηλών και γραμμών έχουν προεπιλεγμένη τιμή 8px και συνδυάζονται σε μία γραμμή gap όταν ταιριάζουν, και η ζωντανή προεπισκόπηση πλέγματος αντικατοπτρίζει πάντα τα ίχνη grid-template-columns και grid-template-rows σας, συμπεριλαμβανομένων σταθερών στηλών pixel από μια προκαθορισμένη διάταξη όπως οι πλευρικές ράγες 200px του ιερού δισκοπότηρου. Το αντιγράψιμο αποτέλεσμα καλύπτει και τις δύο πλευρές: ένα μπλοκ CSS έτοιμο για το stylesheet σας και ένα αντίστοιχο κομμάτι HTML με ένα div grid-area ανά ονομασμένη περιοχή.
Το Grid και το flexbox λύνουν διαφορετικά προβλήματα διάταξης και το css-flexbox-generator σε αυτόν τον ιστότοπο είναι το καλύτερο σημείο εκκίνησης για μονοδιάστατες διατάξεις — μία γραμμή ή στήλη ευέλικτων στοιχείων όπως μια μπάρα πλοήγησης ή μια στοίβα καρτών. Καταφύγετε σε αυτή τη γεννήτρια grid όταν χρειάζεστε δισδιάστατο έλεγχο, ρητές γραμμές και στήλες ή ονομασμένες περιοχές όπως header/nav/main/footer· τα δύο εργαλεία συχνά καταλήγουν στην ίδια σελίδα, το grid για το κέλυφος της σελίδας και το flexbox μέσα στα κομμάτια του. Όπως κάθε εργαλείο σε αυτόν τον ιστότοπο, τρέχει εξ ολοκλήρου στον browser σας — χωρίς ανέβασμα αρχείων, χωρίς λογαριασμό.