Dus wat is er aan de hand met roostersystemen? Ik bedoel, Flexbox is hier . Het is klaar, de browsers zijn (min of meer) klaar. Het zal tijd worden. We kunnen verticaal en horizontaal alles centreren zonder CSS transformatie hacks!

Bovendien is er al het andere dat Flexbox kan doen. Maar laten we onszelf niet voor de gek houden. We hebben lang op dat centreerwerk gewacht.

Misschien heb je de briljant bekeken Wat is de Flexbox ?! , series, en je bent helemaal klaar om te gaan. Als je dat niet hebt gezien, zou je dat moeten doen.

Dus ... zijn we nu op zoek naar grid-systemen? In veel opzichten kunnen we dat. Vooral als je soep zo erg haat als ik. Op Flexbox gebaseerde rastersystemen zijn echter al iets, en ze kunnen nog steeds nuttig zijn.

Ze kunnen u bijvoorbeeld helpen om zich aan een CSS-methodiek zoals te houden Object-georiënteerde CSS of BEM . Misschien vind je het leuk om de lessen te gebruiken. Of misschien wen je gewoon even aan Flexbox, en het hebben van het oude twaalf kolommen tellende raster zou je helpen je aan te passen.

Misschien is het gewoon sneller om een ​​vooraf gedefinieerd systeem te gebruiken dan om elk Flexbox-raster dat u nodig heeft aan te passen.

Wat de redenen ook zijn, roostersystemen gaan niet weg; en je kunt het beste van beide werelden hebben. Dus waarom zou je niet?

De "grote twee"

Ik zou nalatig zijn als ik dat niet vermeldde Foundaton 6 is uit en heeft een Flexbox-versie van zijn raster als een optie. Idem het nog te verschijnen Bootstrap 4 .

Ze houden de oude netwerken bij voor de mensen die minder-compatibele browsers moeten ondersteunen, maar ze zijn klaar om de overstap te maken.

Flexbox-raster

Dit toepasselijk genaamde rastersysteem houdt je twaalf kolommen bij. Het heeft alle bekendheid van 960.gs, alle geavanceerde lay-outmogelijkheden van Flexbox, plus de responsive-ready klassen (extra klein, klein, medium en groot) die we gewend zijn.

Opgelost door Flexbox

Opgelost door Flexbox was eigenlijk gemaakt als een demo. Toch is het een vrij complete en functionele demo die als basis kan dienen voor menig project.

Gridlex

Gridlex komt tegemoet aan zijn slogan: "Just a Flexbox Grid System". Er is niet veel om het te onderscheiden van Flexbox Grid. Kies degene met de betere klassenamen, denk ik.

sGrid

sGrid is een beetje anders. Specifiek is het gebouwd met Stylus. Ik weet het? Dacht dat we nu allemaal gewoon SASS gebruikten. Hoe dan ook, het is ook ontworpen om te worden geïntegreerd met een aantal andere technologieën: Meteor, Grunt, React en NPM.

scss-flex-grid & sass-flex-mixin

Oh daar gaan we. SCSS-flex-raster en sass-flex-mixin zijn twee afzonderlijke op SASS gebaseerde Flexbox-roosters. Je kunt vanuit hun repository clonen of scss-flex-grid installeren via NPM.

Conclusie

De gereedschappen zijn beschikbaar. Tot nu toe heb ik geen "fan-favoriet" kunnen identificeren. De kans is groot dat mensen voor het grootste deel gewoon gebruik zullen maken van wat hun favoriete CSS-frameworks bieden.

In elk geval is er weinig reden meer om niet langer in Flexbox vast te zitten.