Γεννήτρια CSS Grid

Εισαγωγή στο CSS Grid Layout

Το CSS Grid Layout αποτελεί ένα πανίσχυρο σύστημα δισδιάστατης διάταξης για τον παγκόσμιο ιστό. Σε αντίθεση με παλαιότερες μεθόδους, επιτρέπει την ταυτόχρονη ευθυγράμμιση στοιχείων σε στήλες και σειρές. Η «Γεννήτρια CSS Grid» απλοποιεί αυτή τη διαδικασία, επιτρέποντας την οπτική σχεδίαση του πλέγματος απευθείας στον περιηγητή σας.

Η λειτουργία του εργαλείου βασίζεται στην άμεση αλληλεπίδραση: ορίζετε τις παραμέτρους του πλέγματος και στη συνέχεια σύρετε το ποντίκι πάνω στα κελιά για να τοποθετήσετε τα στοιχεία σας. Ο κώδικας CSS και HTML παράγεται αυτόματα, έτοιμος για αντιγραφή και επικόλληση στο έργο σας.

---

Κατανόηση των ιδιοτήτων grid-template-columns και grid-template-rows

Η δομή ενός πλέγματος καθορίζεται από τις ιδιότητες grid-template-columns (για τις στήλες) και grid-template-rows (για τις σειρές). Η εφαρμογή σάς επιτρέπει να ορίσετε:

• Στήλες: Από 1 έως 12 στήλες.
• Σειρές: Από 1 έως 12 σειρές.

Κάθε γραμμή ή στήλη (track) διαθέτει το δικό της πεδίο εισαγωγής για τον καθορισμό του μεγέθους της. Μπορείτε να εισάγετε οποιαδήποτε έγκυρη τιμή CSS grid, όπως:

• 1fr (κλασματική μονάδα)
• 200px (σταθερό μέγεθος σε pixel)
• auto (αυτόματη προσαρμογή)
• min-content (ελάχιστο περιεχόμενο)
• minmax(120px, 1fr) (δυναμικό εύρος μεταξύ ελάχιστης και μέγιστης τιμής)

Αν εισαχθεί μια μη έγκυρη τιμή (για παράδειγμα not-a-grid-track), το πεδίο εισαγωγής επισημαίνεται ως μη έγκυρο, αλλά ο παραγόμενος κώδικας CSS διατηρεί την τελευταία έγκυρη τιμή που είχε καταγραφεί.

---

Η μονάδα fr και η χρήση της συνάρτησης repeat()

Η κλασματική μονάδα fr (fractional unit) αντιπροσωπεύει ένα μερίδιο του ελεύθερου χώρου στον περιέκτη του πλέγματος. Για παράδειγμα, αν ορίσετε τρεις στήλες με μέγεθος 1fr η καθεμία, ο διαθέσιμος χώρος θα μοιραστεί εξίσου σε τρία ίσα μέρη.

Για τη διατήρηση καθαρού και σύντομου κώδικα, η γεννήτρια ενσωματώνει τη συνάρτηση repeat(). Όταν ανιχνεύονται συνεχόμενες γραμμές ή στήλες που μοιράζονται την ίδια ακριβώς τιμή μεγέθους, αυτές ομαδοποιούνται αυτόματα στον παραγόμενο κώδικα CSS. Έτσι, αντί για την αναγραφή 1fr 1fr 1fr, το CSS θα εξαχθεί ως repeat(3, 1fr).

---

Καθορισμός κενών με τις ιδιότητες column-gap και row-gap

Η απόσταση μεταξύ των στοιχείων του πλέγματος ρυθμίζεται με ακρίβεια μέσω των εξής πεδίων:

• Κενό στηλών (column-gap): Τιμή μεταξύ 0 και 48px.
• Κενό σειρών (row-gap): Τιμή μεταξύ 0 και 48px.

Αυτές οι δύο ιδιότητες λειτουργούν ανεξάρτητα. Ωστόσο, εάν οι τιμές για το κενό στηλών και το κενό σειρών συμπίπτουν (για παράδειγμα, 20px και στα δύο πεδία), το εργαλείο συγχωνεύει τις ιδιότητες στον παραγόμενο κώδικα CSS, χρησιμοποιώντας τη σύντομη γραφή της απλής ιδιότητας gap.

---

Τοποθέτηση στοιχείων και διαχείριση ορίων

Η τοποθέτηση των θυγατρικών στοιχείων γίνεται οπτικά, σχεδιάζοντας ορθογώνια πάνω στο πλέγμα.

+---+---+---+
| A | A |   |  <- Στοιχείο Α (καλύπτει 2 στήλες)
+---+---+---+
|   | B | B |  <- Στοιχείο Β (επικάλυψη ή ξεχωριστή θέση)
+---+---+---+

Κανόνες τοποθέτησης και περιορισμοί:

1. Σχεδίαση: Κάντε κλικ και σύρετε το ποντίκι πάνω από τα κελιά. Μόλις απελευθερώσετε το κουμπί του ποντικιού, δημιουργείται ένα τοποθετημένο στοιχείο που εκτείνεται στις επιλεγμένες στήλες και σειρές.
2. Κώδικας: Κάθε στοιχείο που σχεδιάζετε λαμβάνει τις δικές του ιδιότητες grid-column και grid-row στο CSS, καθώς και ένα αντίστοιχο div στο HTML.
3. Επικάλυψη: Τα στοιχεία μπορούν να επικαλύπτονται. Το στοιχείο που σχεδιάζεται χρονικά αργότερα τοποθετείται πάνω από τα προηγούμενα.
4. Όριο στοιχείων: Το εργαλείο υποστηρίζει τη δημιουργία έως και 16 στοιχείων.
5. Διαγραφή: Κάνοντας κλικ στο σύμβολο «×» πάνω σε ένα στοιχείο, αυτό αφαιρείται από το πλέγμα.

---

Έτοιμα πρότυπα διάταξης

Για ταχύτερη έναρξη σχεδίασης, η εφαρμογή παρέχει έτοιμα πρότυπα που καλύπτουν τις πιο συχνές δομές ιστοσελίδων:

---

Προστασία προσωπικών δεδομένων

Η επεξεργασία των δεδομένων σας πραγματοποιείται με απόλυτη τοπικότητα. Το πλέγμα σας δημιουργείται απευθείας στον περιηγητή σας. Καμία από τις ρυθμίσεις σας δεν μεταφορτώνεται στο BroBroGo.

---

Συχνές Ερωτήσεις (FAQ)

Πώς τοποθετώ στοιχεία στο πλέγμα (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 ορίζει το πλέγμα και τοποθετεί το κάθε στοιχείο. Επικολλήστε και τα δύο στο έργο σας και θα έχετε την ίδια ακριβώς διάταξη που σχεδιάσατε εδώ.

Τι συμβαίνει όταν πατάω «Καθαρισμός στοιχείων»;
Η επιλογή αυτή αφαιρεί ακαριαία όλα τα τοποθετημένα στοιχεία από το πλέγμα σας. Το αποτέλεσμα είναι ένας άδειος περιέκτης HTML και η καταγραφή 0 στοιχείων στη σχεδίασή σας.

Πώς λειτουργεί η «Προσθήκη στοιχείου»;
Η επιλογή αυτή δημιουργεί ένα νέο στοιχείο HTML στον κώδικα, επιτρέποντάς σας να εισάγετε επιπλέον περιεχόμενο στη δομή του πλέγματος.