Crie Layouts Modernos Facilmente com Gridlex CSS Grid System
O desenvolvimento de frontend melhorou radicalmente com a introdução de Flexbox CSS. Isso torna muito mais fácil criar grades e colunas que naturalmente mudam para layouts responsivos.
Em vez de codificar sua própria grade flexbox do zero, é muito mais fácil usar uma ferramenta como Gridlex. Esta biblioteca flexbox de código aberto é super leve e muito fácil de personalizar.
Tudo que você faz é adicione a folha de estilo Gridlex para a sua página e trabalhar com suas classes de grade. Colunas internas levam uma aula .col e você envolve tudo isso dentro de um .grade recipiente. Isso define todas as colunas na mesma largura e cria uma interface uniforme.
Este padrão pode ser substituído adicionando classes de dimensionamento para cada coluna. Dessa forma, você pode ter uma coluna com 70% de largura e outra coluna com 30% de largura (por exemplo, conteúdo / barra lateral).
Você encontrará toneladas de amostras de grade na home page da Gridlex com demonstrações ao vivo e partes de codigo para copiar / colar em seu site. É uma enorme biblioteca com tantos classes opcionais para ajudar você a construir as grades mais simples para qualquer site.
Todas as grades somam um total de 12 mini-colunas, assim você pode definir quanto espaço cada coluna deve ocupar. Isso pode parecer confuso, mas faz sentido quando você vê as demonstrações visuais.
Aqui está um exemplo de código usado para uma grade maior com larguras variadas:
………
Note que o .grade classe contém tudo e as colunas tentam dividido em 12 partes (no exemplo isso seria ⅓ largura para cada). No entanto, as colunas fixas span 2 e 6 cols respectivamente, então a primeira coluna usa uma largura automática com base em tudo o que resta.
Usando as outras duas colunas, podemos deduzir que haveria 4 colunas (12-6-2) para atingiu um total de 12. É tudo muito simples, mas os nomes das classes podem ser confusos. Quando você começar a jogar com o Gridlex em um projeto, você vai pegar o sistema de nomes rapidamente.
Gridlex é atualmente na versão 2.x e os seus constantemente sendo atualizado no GitHub. À medida que o suporte ao navegador cresce, garanto mais atenção ao flexbox, com mais sites adotando esse modelo para grades de página.
Você pode até achar um galeria completa de sites que executam o Gridlex para ver como isso fica quando aplicado a sites ativos.
Se você nunca usou o flexbox antes, o Gridlex pode ser uma biblioteca divertida para brincar. Mas eu também recomendo praticar primeiro usando jogos flexbox divertidos para testar seus conhecimentos e ajudá-lo a entender os fundamentos.
Gridlex é disponível gratuitamente no repositório GitHub ou você pode puxá-lo via npm ou bower. Oferece documentação completa no site principal, incluindo demos para colunas de largura variável e consultas de mídia.
Você tem controlo total sobre o design flexbox e só leva algumas classes de CSS fazer acontecer! E se você tiver uma pergunta rápida ou quiser compartilhar um site criado usando o Gridlex, poderá enviar uma mensagem ao criador no Twitter @webdevlint.
