Γεννήτρια CSS Grid - Σχεδιαστής
Πεδίο Ζωντανής (Live) Δοκιμασίας/Grid
Ο Σκοπός και η Δύναμη μιας.. 'Grid' / Visual Γεννήτριας!
Το (CSS Grid - Πλέγμα) αποτελεί, μακράν, το βαρύ 'Πυροβολικό/Σύστημα' στην παγκόσμια ιστορία ελέγχου εγγράφων CSS Structure! Δυστυχώς όμως, η Σύνταξη (Syntax/Properties), απαιτεί σκληρή/μακρόχρονη εκπαίδευση & γνώσεις! (Grid areas / MinMax / Fr..) κ.ο.κ! Το 'Δικό μας - Οπτικό Εργαλείο - Generator', μηδενίζει το μαρτύριο! Σύρετε τις μπάρες (Sliders), ονομάστε στήλες, διαλέξτε Templates — και αφήστε την Οθόνη να κωδικοποιεί ΑΚΡΙΒΩΣ όπως βλέπετε το Grid σας (Σε χιλιοστά Δευτερολέπτου)!
Τρισδιάστατη Οπτική Ανάδραση (Visual Matrix Real-time)
«Αυτό που βλέπετε... Είναι Αυτό που θα Πάρετε!» Όλες οι αλλαγές σε columns/sliders/gaps περνούν αυτοστιγμεί στο Board/Preview. (WYSIWYG).
Απόλυτη Κατάκτηση του Φράκταλ / Μονάδες 'FR'
Οι τιμές /Templates μας χρησιμοποιούν εγγενώς την μαγική μονάδα `fr` (Fraction/Κλάσμα), ώστε η Δομή σας, να δουλεύει/κυλάει σαν 'Νερό' ανεξάρτητα από το Viewport-size / Οθόνη υπολογιστή!
Κωδικοποίηση / Clean CSS-Code
100% Έτοιμος (Production scale) κώδικας.. με εντολές 'grid-template-columns', 'rows', 'gap' -- σε 2 Classes (container / items).
Σχεδιάστε CSS Grid Υψηλών-Απαιτήσεων (Σε 3 βήματα)..
Καθορισμός 'Καμβά' (Matrix Setup : Στήλες x Γραμμές)
Χρησιμοποιήστε τους σύρτες (Sliders) μας, για να δηλώσετε 'Πόσες Στήλες (Columns - Οριζόντιος x)' και πόσες 'Γραμμές (Rows - Κάθετος y)' χρειάζετε.
Spacing (Gaps) Εμβαδόν & Μοντέλα Ανάπτυξης
Δώστε 'Χώρο-Οξυγόνο / Gaps' στο grid. Πειραματιστείτε με τα DropDown-Templates (Even // MinMax/Responsive..). Δείτε την συμπεριφορά της σκακιέρας!
Αντιγραφή-Εξαγωγή (Export to CSS)
Όταν η Φόρμα πάρει την ιδανική Τελική της Mορφή... Πατήστε (Αντιγραφή Συντακτικού - CSS) ! Ενα class .grid-container επικολλάται στον Web designer σας.
Θεμέλια / Πότε η Web Σχεδίαση ..ΑΠΑΙΤΕΙ το Grid..;
O Σκελετός / Αρχιτεκτονική του Ιστότοπου(Page Layouts)
Κλασσικά Σενάρια (Header -> Sidebar/Αριστερά + Μεσαίο Main Content -> Footer Κάτω). Το 'Named-Grid-Areas' είναι Αήττητο... Για σελίδες βιτρίνες!
SaaS / Admin Πάνελ Δεδομένων (Dashboards Analytics)
Δημιουργήστε χαοτικά πολύπλοκα Charts.. Όπου 1 Βασικό Chart, καλύπτει/τρώει 'span' (+4 στηλών / +3 Γραμμών) και τριγύρω έχει μικρά KPI cards!
Τέχνη / Σύνθετες Γκαλερί (Masonry Galleries View)
Γκαλερί εικόνων με ασύμμετρα Layouts (π.χ. To feature Image πιάνει Span 2... τα άλλα 1), προσδίδοντας (auto-fill & minmax) ατελείωτη ροή και Mobile-Perfect design.
Online Εφημερίδες / Περιοδικά (Editorial - Magazine Style)
Αρχικές (Homepage) Ειδήσεων (News), με τεράστια (Hero) εξώφυλλα άρθρων, 3 μικρές κάθετες λίστες στα άκρα... Μόνο, με Grid.
Χρυσά.. Μυστικά.. ('Css-Grid' Developer Tips)
✓ Λατρεύουμε τα (fr), ξεχνάμε τα (%) Ποσοστά...!
To 'fr' (Fraction/Μερίδιο) αποτελεί το Μαγικό φίλτρο του Grid. Λέει στο Grid: «Αφού τακτοποιήσεις τα Σταθερά-Pixel-Items.. ΠΑΡΕ τον ΥΠΟΛΟΙΠΟ ΧΩΡΟ... (Διαθέσιμο κενό) και Κόψτον - Μοίρασε τον σε.. Κομμάτια/FRs»... !! Ούτε πράξεις, Ούτε (%) Overflow bugs.
✓ To... 'Άγιο Δισκοπότηρο' - Minmax() - Responsive Χωρίς / Media Query !!
Με (μόνο) Μία Γραμμή: `grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))` => Εχετε ένα 'Αυτο-Προσαρμοζόμενο Mobile Friendly layout!! (Βαλ' τα σε σειρές... Έως 250px! Μετα; Άλλαξε Σειρά μόνος Σου! Καλύπτοντας(1fr) ΟΛΟ τον άδειο Χώρο!). Αδιανόητο!
✓ Χρήση 'Ενεργών Περιοχών' / (Grid Template Areas) ... 'Ζωγραφίζοντας τον Κώδικα!'
Ο Κανόνας (grid-template-areas: "header header" "nav main" "footer footer" ).. Κάνει την Ανάγνωση του CSS, να θυμίζει Excel ASCII-ART! Πανεύκολος εντοπισμός λαθών και απίστευτα... Human-Friendly / Code Modifications.
✓ O Σκοτεινός γρίφος: 'Auto-Fill' vs 'Auto-Fit'.. !!
To auto-FILL: ρίχνει-σπρώχνει.. Στο Container "ΟΣΕΣ - ΠΕΡΙΣΣΟΤΕΡΕΣ Tracks(κολωνες) ΧΩΡΑΝΕ.. ΑΚΟΜΗ ΚΑΙ (Άδειες !!! - χωρίς Κείμενο) !!. Το auto-FIT : (Επιβιώνουν μόνο όσες εχουν ITEMS!! Και οι κενές κολώνες Διαλύονται 'Compress' ώστε οι Γεμάτες, να ρουφήξουν τον κενό χώρο(Expand!!).
❓ Συνήθως Οι Developers - Ρωτούν: (FAQ)
1.. Τι ακριβώς... 'στο καλό' είναι αυτό το 'FR' / (Fr-Unit);
'Ενα Fr => 'ΕναFractional (Κλασματικό) Μερίδιο/Κομμάτι Πίτσας! ΑΦΟΥ το πλέγμα (Grid) υπολογίσει πόσο χώρο πιάνουν τα [Pixels / Emin..] ... Αν περισσέψει ... Π.χ(300px Άδειο Κενό στην οθόνη): Αν γράψεις `repeat(3, 1fr) ` === Δημιουργεί 3 Κολώνες και τα μοιράζει τέλεια! (από 100px). Αν γράψεις `1fr 2fr`... (Η Δευτερη.. θα πάρει το.. ΔΙΠΛΑΣΙΟ Χώρο της 1ης!).
ΠΡΕΠΕΙ / ΟΦΕΙΛΩ... πλέον να εγκαταλείψω -και να ξεχάσω- το (Flexbox) για ΠΑΝΤΑ? ?
ΟΧΙ ΒΕΒΑΙΑ! Λειτουργούν -σαν ζευγάρι- συμπληρωματικά ! Το CSS-GRID σχεδιάζει το Macro-Layout/Σκελετό (ΟΛΟ-Τον τοίχο του σπιτιού: Παράθυρα, Πόρτες). Το FLEXBOX-CSS: Κάνει το (Micro-Layout) / (Το εσωτερικό!) - Στοιχίζει τα Κουμπάκια [Νavbar, Εικονίδια, Text]. *Rule: Grid για Το Σπιτι. FlexBox.. Για τα Έπιπλα της κουζίνας !! *
Ο κανόνας: ('Minmax').. Τι είναι.. και που μπαίνει;
H Function: `minmax( Ελαχιστο Όριο , Μεγιστο όριο ) `. Πχ:`minmax( 200px , 1fr) `. Λέει στον Parser της Οθόνης: "Κοίτα! Η Στήλη.. Δεν επιτρέπετε ΠΟΤΕ να γίνει Μικρότερη από 200px (Mobile phone).. ΑΛΛΑ Αν μπει απο - Τεράστια T.V., δώσε της (1fr - Όσο Χώρο Λαχταράει - ώστε να γεμίσει.. η Οθόνη).
Κάποιες Φορές τα (grid-items) ρουφάνε τεράστιο Χώρο/Γραμμές - Ξεχειλώνοντας την σελίδα!
Αυτό συμβαίνει γιατί το default-CSS.. ΕΙΝΑΙ TO : `align-items: stretch` (Ξεχείλωμα - Σε όλο το cell!). Εάν θέλετε το Κουτί (card) να πιάνει ΜΟΝΟ τον χώρο του κειμένου.. / Τότε αλλλαξτε-override την επιλογή του container, με: `align-items: start;` ή / και `justify-items: start;`. Έχουν εξαιρετική.. 'πειθαρχία'.