Wtricks • Tutoriais e Dicas do Mundo Digital

Como criar seu próprio Grid System Responsivo em CSS sem usar Frameworks

Por Carlos Sabo Cantanzaro • 19/02 - 15:44 pm | Em CSS

Aprenda como criar seu próprio Grid System Responsivo com CSS, uma opção muito mais performática em relação aos Frameworks CSS

Usar frameworks para desenvolver suas aplicações web, pode ser uma solução simples e muito inteligente quando se tem um prazo apertado para um projeto.

Porém, quando estamos em busca de performance, criar suas próprias ferramentas pode ser uma opção ainda mais inteligente!

O Grid System é usado para criar colunas responsivas em CSS, possibilitando que seu usuário tenha uma boa navegação em sua aplicação, tanto usando um desktop, quando um dispositivo móvel.

Por que não usar um Framework CSS?

Quero primeiramente deixar claro que não sou contra o uso de frameworks, muito pelo contrário, acredito que dominar o uso dessas ferramentas é algo muito inteligente!

Porém, muito mais do que saber usar a ferramenta, temos que saber no que estamos mexendo! Quando usamos framework estamos colocando uma caixa de ferramentas inteira no nosso site, quando as vezes, tudo que precisamos é só de uma chave de fenda!

Ou seja, se a única coisa que eu preciso de um framework é o Grid System, não é viável colocar todo um amontoado de código na minha aplicação! Isso só faria meu site consumir mais banda, entregando uma navegação mais lenta para meus usuários.

Então está liberado o uso de frameworks, mas acredito que depois desse tutorial, você irá repensar duas vezes se realmente precisa de um!

Caso fique com alguma dúvida, use os comentários, irei responder todo mundo assim que possível!

Veja o resultado:

See the Pen CSS GRID without Frameworks by Carlos Sabo Cantanzaro (@wtricks) on CodePen.

PARTICIPE DA DISCUSSÃO