Τι συμβαίνει με τα συστήματα πλέγματος; Εννοώ το Flexbox είναι εδώ . Είναι έτοιμο, τα προγράμματα περιήγησης είναι (περισσότερο ή λιγότερο) έτοιμα. Καιρός ήταν. Μπορούμε να συγκεντρώσουμε κάθετα και οριζόντια οτιδήποτε χωρίς να χτυπήσουμε το CSS!

Επιπλέον, υπάρχουν όλα αυτά τα άλλα πράγματα που μπορεί να κάνει το Flexbox. Ας μην ξεκουραστούμε, όμως. Έχουμε περιμένει αυτό το κεντράρισμα για μεγάλο χρονικό διάστημα.

Ίσως να βλέπατε το λαμπρό Τι είναι το Flexbox ;! , σειρά, και είστε έτοιμοι να πάνε. Εάν δεν το έχετε δει, πρέπει.

Έτσι ... τώρα βγάζουμε τα συστήματα πλέγματος; Λοιπόν, με πολλούς τρόπους, θα μπορούσαμε. Ειδικά αν μισείς την σούπα κατηγορίας όσο και εγώ. Ωστόσο, τα συστήματα πλέγματος με βάση το Flexbox είναι ήδη ένα πράγμα, και μπορούν ακόμα να είναι χρήσιμα.

Για παράδειγμα, μπορεί να σας βοηθήσουν να επιμείνετε σε μια μεθοδολογία CSS Αντικειμενοστραφής CSS ή BEM . Ίσως σας αρέσει να χρησιμοποιείτε τις τάξεις. Ή ίσως απλά να συνηθίσετε στο Flexbox, και έχοντας το παλιό πλέγμα δώδεκα-στήλης θα σας βοηθήσει να προσαρμόσετε.

Ίσως είναι απλώς ταχύτερη η χρήση ενός προκαθορισμένου συστήματος από το προσαρμοσμένο κώδικα κάθε πλέγματος Flexbox που χρειάζεστε.

Όποιοι και αν είναι οι λόγοι, τα συστήματα πλέγματος δεν πηγαίνουν μακριά. και μπορείτε να έχετε το καλύτερο και των δύο κόσμων. Γιατί λοιπόν όχι;

Τα "μεγάλα δύο"

Θα ήμουν αμέλεια εάν δεν το ανέφερα αυτό Foundaton 6 είναι έξω, και έχει μια έκδοση Flexbox του πλέγματος ως επιλογή. Μέχρι το απελευθερωμένο ακόμη Bootstrap 4 .

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

Πλέγμα Flexbox

Αυτό το εύχρηστο σύστημα πλέγματος διατηρεί σε σας δώδεκα στήλες. Έχει όλη την εξοικείωση των 960.gs, όλες τις προηγμένες δυνατότητες σχεδίασης του Flexbox, καθώς και τις τάξεις που είναι έτοιμες να ανταποκριθούν (επιπλέον μικρές, μικρές, μεσαίες και μεγάλες) που έχουμε περιμένουν.

Επίλυση από το Flexbox

Επίλυση από το Flexbox έγινε βασικά ως ένα demo. Ακόμα, πρόκειται για ένα αρκετά πλήρες και λειτουργικό demo που θα μπορούσε να χρησιμοποιηθεί ως βάση για πολλά έργα.

Gridlex

Gridlex ζει στο σύνθημά του, "Απλά ένα σύστημα πλέγματος Flexbox". Δεν υπάρχουν πολλά να το διαφοροποιήσετε από το Flexbox Grid. Επιλέξτε το ένα με τα καλύτερα ονόματα τάξεων, υποθέτω.

sGrid

sGrid είναι λίγο διαφορετικό. Συγκεκριμένα, είναι χτισμένο με Stylus. Το ξέρω? Σκεφτήκαμε ότι τώρα χρησιμοποιούσαμε μόνο το SASS. Τέλος πάντων, έχει επίσης σχεδιαστεί για να ενσωματώνεται σε πολλές άλλες τεχνολογίες: Meteor, Grunt, React και NPM.

scss-flex-grid & sass-flex-mixin

Ας πάμε εκεί. scss-flex-grid και sass-flex-mixin είναι δύο ξεχωριστά δίκτυα Flexbox βασισμένα σε SASS. Μπορείτε να κλωνοποιήσετε είτε από την αποθήκη τους, είτε να εγκαταστήσετε το scss-flex-grid μέσω NPM.

συμπέρασμα

Τα εργαλεία είναι εκεί έξω. Μέχρι στιγμής, δεν ήμουν σε θέση να προσδιορίσω ένα "αγαπημένο φαβορί". Οι πιθανότητες είναι ότι οι άνθρωποι θα χρησιμοποιήσουν μόνο αυτό που έρχεται με τα αγαπημένα τους πλαίσια CSS, ως επί το πλείστον.

Σε κάθε περίπτωση, δεν υπάρχει πια δικαιολογία για να μην κολλήσετε στο Flexbox.