Τι είναι το CSS Grid;
Το CSS Grid Layout είναι ένα δισδιάστατο σύστημα διάταξης ενσωματωμένο στα σύγχρονα προγράμματα περιήγησης. Ορίζετε έναν περιέκτη πλέγματος με display: grid, στη συνέχεια ελέγχετε τις στήλες με grid-template-columns και τις γραμμές με grid-template-rows. Τα κλασματικά μονάδια (fr) διανέμουν τον διαθέσιμο χώρο αναλογικά. Τα θυγατρικά στοιχεία μπορούν να εκτείνονται σε πολλές στήλες ή γραμμές χρησιμοποιώντας grid-column: span N και grid-row: span N.
Πώς να χρησιμοποιήσετε τη Γεννήτρια CSS Grid
-
Ορίστε τον αριθμό στηλών και γραμμών χρησιμοποιώντας τα αριθμητικά πεδία (1–12 για καθένα).
-
Ρυθμίστε grid-template-columns και grid-template-rows για έλεγχο μεγεθών (π.χ. 1fr 2fr, 200px auto).
-
Ορίστε το κενό μεταξύ κελιών (π.χ. 10px, 1rem).
-
Κάντε κλικ σε οποιοδήποτε κελί στην προεπισκόπηση για να το επιλέξετε (γίνεται πορτοκαλί).
-
Ορίστε col-span και row-span στον πίνακα Έκταση κελιού, στη συνέχεια κάντε κλικ στην Εφαρμογή. Τα κελιά με έκταση γίνονται πράσινα.
-
Κάντε κλικ στην καρτέλα CSS ή HTML για εναλλαγή μορφής εξόδου, στη συνέχεια Αντιγραφή στο πρόχειρο.
-
Κάντε κλικ στην Επαναφορά όλων για να ξεκινήσετε με νέο πλέγμα 3×3.