Πρόκειται για μια συλλογή προτύπων εκκίνησης για διατάξεις και μοτίβα που χρησιμοποιούν CSS Grid. Η ιδέα εδώ είναι να δείξουμε τι μπορεί να κάνει η τεχνική και να παρέχει ένα σημείο εκκίνησης που μπορεί να επαναπροσδιοριστεί για άλλα έργα.
Να θυμάστε ότι η υποστήριξη του προγράμματος περιήγησης για το Grid είναι καλή, αλλά απαιτεί εναλλακτικά για τα παλαιά προγράμματα περιήγησης. Αυτό σημαίνει ότι ένα απλό αντίγραφο και επικόλληση αυτών μπορεί να μην ταιριάζει σε ορισμένες περιπτώσεις χρήσης.
Διάταξη Holy GrailΗ κλασική διάταξη τριών στηλών όπου δύο πλευρικές μπάρες και ένα δοχείο που κρατά το αντίγραφο του σώματος περικλείεται μεταξύ κεφαλίδας και υποσέλιδου πλήρους πλάτους.
Εύκαμπτο ιερό δισκοπότηροΌλα παραμένουν ανέπαφα καθώς το πλάτος της θύρας προβολής αλλάζει χρησιμοποιώντας ένα δοχείο υγρού περιεχομένου.
Δείτε το Pen CSS Grid - Holy Grail 2 του Geoff Graham (@geoffgraham) στο CodePen.
Απαντητικό Άγιο ΔισκοπότηροΤα πράγματα συσσωρεύονται μόλις η θύρα προβολής γίνει στενή.
Δείτε το Pen CSS Grid: Holy Grail Layout - Responsive by Geoff Graham (@geoffgraham) στο CodePen.
2-στήλες με κεφαλίδα και υποσέλιδοΜια κλασική διάταξη ιστολογίου όπου μια στήλη είναι για την ανάρτηση και η άλλη για πλευρική γραμμή.
Ευέλικτες 2 στήλεςΗ διάταξη γίνεται ασταθής όταν η θύρα προβολής γίνεται στενή αλλά η διάταξη παραμένει στη θέση της.
Δείτε το Pen CSS Grid: Header, Footer with 2-Column (Flexible) του Geoff Graham (@geoffgraham) στο CodePen.
Αποκριτική 2-στήλεςΤα πράγματα συγκεντρώνονται σε μικρότερες οθόνες.
Δείτε το Pen CSS Grid: Header, Footer with 2-Column (Responsive) του Geoff Graham (@geoffgraham) στο CodePen.
Ομοιόμορφα κατανεμημένο, κατάλληλο όπως απαιτείταιΤα στοιχεία ρέουν στη διάταξη και τελειώνουν όταν δεν υπάρχουν άλλα.
Δείτε το Pen CSS Grid ομοιόμορφα κατανεμημένο, όσο χρειάζεται από τον Geoff Graham (@geoffgraham) στο CodePen
Άρθρο με BreakoutΈνα μεγάλο μικρό τέχνασμα από τον Tyler Sticka που επιτρέπει σε ένα στοιχείο να ξεφύγει από το πλέγμα. Η Rachel Andrew παρέχει μια λεπτομερή εξήγηση για το πώς οι ονομασμένες γραμμές πλέγματος το επιτρέπουν να λειτουργεί.
Δείτε το Pen CSS Grid: Article with Breakout του Geoff Graham (@geoffgraham) στο CodePen.
Βασικό ημερολόγιοΌπως θα περίμενε κανείς, το CSS Grid λειτουργεί καλά για ένα πλέγμα ημερολογίου.
Δείτε το Pen CSS Grid: Calendar από τον Geoff Graham (@geoffgraham) στο CodePen.
Μονοπωλιακό συμβούλιοΜια απλή αναψυχή του επιτραπέζιου παιχνιδιού. Το Jen Simmons έχει ένα γλυκό demo πλήρες με στυλ Monpoly.
Δείτε το Pen CSS Grid: Monopoly Board από τον Geoff Graham (@geoffgraham) στο CodePen.
Οι εκπαιδευτικοί μας
Frontend Masters
Χρειάζεστε εκπαίδευση ανάπτυξης πρώτης γραμμής;
Το Frontend Masters είναι το καλύτερο μέρος για να το αποκτήσετε. Έχουν μαθήματα για όλες τις πιο σημαντικές τεχνολογίες front-end, από το React έως το CSS, από το Vue έως το D3 και μετά με το Node.js και το Full Stack.
