Então, o que está acontecendo com os sistemas de grade? Quero dizer, o Flexbox está aqui . Está pronto, os navegadores estão (mais ou menos) prontos. Já estava na hora. Podemos centralizar verticalmente e horizontalmente qualquer coisa sem CSS transformar hacks!
Além disso, há todas as outras coisas que o Flexbox pode fazer. Não vamos nos enganar. Nós esperamos por essa coisa de centramento por um longo tempo.
Talvez você tenha observado o brilhante O que o Flexbox ?! , série e você está pronto para ir. Se você não viu isso, você deveria.
Então… estamos descartando sistemas de grade agora? Bem, em muitos aspectos, nós poderíamos. Especialmente se você odeia sopa de classe tanto quanto eu. No entanto, sistemas de grade baseados em Flexbox já são uma coisa, e eles ainda podem ser úteis.
Por exemplo, eles podem ajudá-lo a seguir uma metodologia CSS como CSS orientado a objeto ou BEM . Talvez você apenas goste de usar as classes. Ou talvez você esteja apenas se acostumando com o Flexbox, e ter a antiga grade de doze colunas ajudaria você a se adaptar.
Talvez seja mais rápido usar um sistema predefinido do que codificar de forma personalizada todas as grades Flexbox de que você precisa.
Quaisquer que sejam as razões, os sistemas de grade não estão indo embora; e você pode ter o melhor dos dois mundos. Então, por que você não deveria?
Eu seria negligente se não mencionasse isso Fundação 6 está fora, e tem uma versão do Flexbox de sua grade como uma opção. Ditto o ainda a ser lançado Bootstrap 4 .
Eles estão mantendo as redes antigas para as pessoas que precisam oferecer suporte a navegadores menos compatíveis, mas estão prontas para fazer a troca.
Este sistema de grade apropriadamente chamado fica com doze colunas. Ele tem toda a familiaridade de 960.gs, toda a capacidade de layout avançado do Flexbox, além das classes prontas para resposta (extra pequeno, pequeno, médio e grande) que esperamos.
Resolvido pelo Flexbox foi basicamente feito como uma demonstração. Ainda assim, é uma demonstração bastante completa e funcional que pode ser usada como base para muitos projetos.
Gridlex faz jus ao seu slogan, "Apenas um sistema de grade Flexbox". Não há muito o que diferenciá-lo do Flexbox Grid. Escolha aquele com os melhores nomes de classe, eu acho.
sGrid é um pouco diferente. Especificamente, é construído com a Stylus. Eu sei direito? Pensei que todos nós estávamos apenas usando o SASS agora. De qualquer forma, ele também foi projetado para ser integrado a várias outras tecnologias: Meteor, Grunt, React e NPM.
Oh lá vamos nós. scss-flex-grid e sass-flex-mixin são duas grades Flexbox baseadas em SASS separadas. Você pode clonar a partir do seu repositório ou instalar o scss-flex-grid via NPM.
As ferramentas estão lá fora. Até agora, não consegui identificar um "favorito dos fãs". As chances são de que as pessoas usem apenas o que vem com suas estruturas CSS favoritas, na maior parte.
Em qualquer caso, há pouca desculpa para não ficar preso no Flexbox.