Um sistema de grid simples com Styled Components

Algumas vezes você vai querer usar um sistema de grid feito por você e não utilizar framework como o Bootstrap.

Nesse tutorial vamos desenvolver um sistema de grid simples, porém responsivo com a ajuda do Styled components.

Para quem não conhece, o Styled Components é uma biblioteca para React e React Native que permite que você utilize CSS dentro do JavaScript do componente da sua aplicação.

Caso você não tenha um projeto iniciado e queira testar o componente, instale o create-react-app. É bem simples de instalar, não precisa saber configurar webpack nem nada do tipo, e é criado um projeto em React bem simples e enxuto, pronto para o uso.

Instalando o Styled Component

Acesse a pasta do seu projeto e rode o comando abaixo no terminal.

yarn add styled-components

Agora vamos importar o styled-components para o projeto, se você estiver usando o create-react-app abra o arquivo ./src/App.js e coloque a chamada logo depois do import do React.

import styled from 'styled-components';
Image for post
Image for post

Antes de continuar vamos remover alguns código que é default do create react app que não vamos usar. O nosso arquivo App.js deve ficar assim.

Image for post
Image for post

Agora vamos criar nosso primeiro styled componente: crie uma div que vai ser um container, que sera responsável por limitar uma largura máxima para nosso site e sempre vai deixar um espaçamento lateral, e vamos chamar esse componente dentro do render.

Image for post
Image for post

Linhas

Vamos criar uma div para as linhas, ela servirá para conter as colunas, garantindo que as colunas fiquem bem ajustadas.

Image for post
Image for post

Colunas

Agora vem a parte legal.

Como vai funcionar as colunas:
- Vai ter doze colunas possíveis;
- Uma coluna pode se estender pela largura de 1 a 12 colunas;
- Se o dispositivo tiver a largura menor que 768px, todas as colunas terão o tamanho de 100%;
- Toda coluna vai ter um espaçamento interno;
- Vamos definir um altura minima para as colunas;
- O valor da largura vai ser passado via props, para saber quanto vai ser o valor de cada coluna vamos fazer uma continha de matemática valor largura / 12 *100;
* Se nenhum valor da coluna for definido, o padrão é 8,33 por cento, que é a largura padrão para uma coluna;

De uma olhada como vai ficar o código

Image for post
Image for post

Acredite ou não, já temos um grid funcionando! Rode o projeto e veja magica no seu navegador.

Diferentes Breakpoints

Se usarmos o Bootstrap como exemplo, vamos querer criar a possibilidade de definir diferentes extensões de coluna para diferentes viewports.

Por exemplo: eu quero que no desktop, minha div tenha a largura de 12 colunas, no tablet de 6 e no mobile volte para 12.

Só que para isso funcionar temos que mudar um pouco o código da coluna.

Primeiro vamos remover a prop grid e vamos definir uma prop mobile que vai ser responsável pelo viewport menor que 768px

Como vamos ter mais de um breakpoints, não precisamos ficar repetindo o código que faz o calculo da coluna, vamos criar uma função que recebe o valor por parâmetro, faz o calculo e retorna o width com o resultado.

Veja como ficou o código

Agora podemos criar os breakpointer para tablet e desktop, só precisamos adicionar novas media query e props no componentes

Image for post
Image for post

Melhorias

Em vez de deixar o código todo dentro do App.js podemos criar uma pasta de componentes e criar um componente reutilizável para o grid.

src/
components/
Grid/
index.js

Dentro do index.js vamos colocar o código de Container, Row, Column e importar o styled-components, a única diferença é que vamos usar o export para cada um.

Veja como vai ficar o index.js

Image for post
Image for post

Agora só precisamos fazer um import desse arquivo no App.js.

Image for post
Image for post

Nosso grid ainda continua funcionando e agora podemos usar ele em qualquer parte do projeto, basta dar um import nele.

Conclusão

Para este artigo, tentei abordar as noções básicas de grid responsivo com componentes utilizando o styled components.

Eu sei que existem varias alternativas para fazer isso e que é estranho colocar o CSS dentro do JavaScript, mais eu realmente gostei pelo o fato de ser fácil construir ele e só precisamos de 56 linhas de código para fazer ele funcionar.

Obrigado por ler este artigo. Espero poder fornecer-lhes algumas informações úteis. Se sim, eu ficaria muito feliz se você recomendasse este post e clicasse no botão do ♥ para que mais pessoas possam ver isso.

Se houver perguntas ou você quiser adicionar algo aqui, por favor, deixe um comentário, ou me procure no Twitter .

Written by

Entusiasta pelo estudo de novas tecnologias, por projetos open source e CSS Evangelista.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store