Simplificando Grids com CSS

Ter um sistema de grid é essencial para qualquer site atualmente. Seja por ajudar a organizar seu conteúdo, separar sessões, criar a estrutura e até, se você usar de forma certa, deixar o seu site responsivo.

Durante a história da web, as grids já foram criadas com tabela, float, bibliotecas CSS externas e hoje, com o grande suporte do Flexbox, a facilidade do CSS-in-JS e o Grid Layout surgindo, ficou muito mais fácil cria-las.

Eu ainda vejo alguns projetos utilizando Bootstrap ou qualquer outra biblioteca CSS para fazer esse trabalho. Veja bem, eu não acho isso ruim, também já utilizei bastante, mas se você começar a pensar em perfomance, aprendizado, etc, não seria mais ideal entender como as grids funcionam e deixar de usar uma biblioteca externa pra isso?

É exatamente disso que esse artigo fala; demostrar como criar um sistema de grid com Flexbox usando:

E apenas pra deixar claro, esse artigo não é sobre:

Mas antes de qualquer coisa, eu gostaria de esclarecer alguns conceitos básicos.

Conceitos.

Sistema de Grid

Nada mais é do que um conjunto de classes e propriedades que formam uma espécie de grade, geralmente com 12 colunas, onde você tem a possibilidade de alinhar ou empilhar o conteúdo do seu site. Para deixar as colunas responsivas (adaptável em qualquer tamanho de tela) é utilizado porcentagem (%) como unidade de medida para definir sua largura. Sendo assim, é só escolhermos a resolução em que as colunas serão criadas; ex. mobile, tablet, desktop ou telas grandes (.xs-, .sm-, .md-, .lg-) e a quantidade de colunas que serão usadas de 1 até 12, em relação a largura do elemento pai, (3–12, 6–12, 4–12, 8–12).

Breakpoint/Media Query

São funções do CSS usadas para aplicar um estilo a partir de ou até um tamanho da tela (min-width / max-width). Com elas que você consegue controlar o layout do site em um celular, tablet, desktop ou telas grandes. Os limites geralmente, mas nem sempre, são 320px (extra small — xs), 768px (small — sm), 992px (medium — md), 1200px (large — lg).

Show me the code!

Agora chega de teoria e vamos para a prática.

Grid com CSS Puro

Demo: https://codepen.io/sergioamjr/pen/OaGNjq

Aqui usaremos os breakpoints 768px, 992px e 1200px e a função calc do css para calcular a largura da coluna segundo a regra de 3.

Sistema de Grid com SCSS

Demo: https://codepen.io/sergioamjr/pen/BGEzzo

As classes, propriedades e breakpoints serão os mesmos do CSS Puro mas usamos as funções mixins e looping dos pré processadores para gera-las no arquivo CSS final.

Sistema de Grid com Stylus

Demo: https://codepen.io/sergioamjr/pen/gQyMWp

Utilizando o sistema de grid no HTML

Para usar qualquer um desses sistema de grid no HTML, basta seguir a seguinte estrutra, onde as classes com prefixo xs- é pra mobile (até 768px), sm-, tablet (até 992px), md-, desktop (até 1200px) e lg-, telas grandes (a partir de 1200px). Lembrando que você deve usa-las dentro do container e também pode usar uma grid dentro de outra grid.

Sistema de Grid com Styled Component

Demo: https://codepen.io/sergioamjr/pen/jQRrZL

Com Styled Component, as propriedades e breakpoints serão os mesmos mas usamos as props dinâmicas pra poder calcular a largura da coluna, usando a mesma regra de 3.

Usando sistema de Grid do Styled Component no React

Conclusão

Pronto, apenas usando esse código, você já tem um sistema de grid completo, sem depender do Bootstrap ou qualquer outra biblioteca externa.

Todos esses códigos e exemplos estarão no repositório Simplificando Grids com CSS, fique a vontade para baixar, usar e deixar uma estrelinha ⭐️