Como utilizar o Grid Layout com Tailwind CSS
Quanto mais os anos vão se passando e as demandas se prolongam, mais o programador tende a procurar tecnologias que o ajudam a conseguir mais fazendo menos. Foi assim que surgiram diversos frameworks e bibliotecas, como por exemplo o React, o Vue, o Angular e o que iremos abordar neste artigo: o Tailwind CSS.
Hoje, construiremos um projeto que aplica o conceito de Grid Layout CSS para este framework, passando pelos principais conceitos necessários para sua implementação. Sendo assim, fica aqui comigo que esta conversa tem muito a nos render!
O que é o Tailwind CSS?
O Tailwind é um framework criado com o intuito de otimizar o uso do CSS. Ao invés da estilização ser feita por classes criadas manualmente pelo programador (onde seus atributos são definidos em um arquivo importado com extensão .css), este framework disponibiliza um conjunto de classes arquitetadas no modelo atomic css, onde cada classe possui um única função, como por exemplo aplicar a cor vermelha para o background de um elemento ou transformar o seu texto em itálico. Todo este conjunto de classes pode ser encontrado na documentação do Tailwind CSS e, mesmo que nenhuma delas corresponda a sua necessidade, você também pode criar uma nova que o faça!
Focado no desenvolvimento mobile-first, todo o processo de estilização é acelerado e otimizado com o Tailwind CSS, que além de ser auto intuitivo possui uma documentação de fácil aprendizado e rápida busca: basta colocar o nome do atributo (como por exemplo object-fit, margin ou display) que é disponibilizado o nome da classe que atende à demanda e como utilizá-la.
O que é Grid?
O conceito CSS Grid Layout (ou apenas Grid para os que estão mais acostumados) envolve a organização de determinado número de elementos em um determinado número de linhas e colunas, formando uma grade na qual estes itens são ordenadamente estruturados. Por meio do Grid é possível definir dimensões para essas linhas e colunas, além de posicionar diversos elementos baseado em ambas, concedendo ao programador um universo de possibilidades.
Dicas para utilizar o Tailwind CSS
Existem diversas formas de instalar o Tailwind CSS no seu projeto, de acordo com a tecnologia que você está utilizando. Na documentação deste framework há um guia prático para cada cenário onde ele pode ser utilizado. Basta seguir o passo a passo específico em que sua situação se encaixa e ser feliz!
Todavia, não se preocupe, pois todo o conhecimento compartilhado aqui pode ser aplicado em qualquer outro cenário em que se possa utilizar o Tailwind CSS. Sendo assim, não estranhe se o nome da propriedade de classe em um elemento for className ao invés de class: ambas têm o mesmo objetivo, mas no React, por convenção, se utiliza a primeira. Dito isto, vamos em frente?
Primeiros passos
Para entender de maneira assertiva como se cria e organiza um Grid, vamos criar um projeto simples e sem muita complexidade: um container principal que possui outros seis containers dentro dele, onde cada um deles possui uma imagem.
No container principal (linha 6 da figura 3), utilizamos o seguinte conjunto de classes para a estilização:
- Bg-black: Classe que define a cor do background da página como preta;
- W-full: Fixa a largura do container para 100% do tamanho da largura disponível;
- H-screen: define a altura do container para 100% da altura da viewport (ou seja, 100% da tela disponível para visualização).
Já nas imagens criadas utilizamos as seguintes classes do Tailwind:
- W-full: fixa a largura do container para 100% do tamanho da largura disponível;
- H-full: Fixa a altura do container para 100% do tamanho da altura disponível;
- Object-cover: Evita que a imagem seja deformada, redimensionando ela com sua proporção mantida e recortando parte dela quando suas dimensões não sejam iguais ao tamanho disponível.
Note que nos containers internos (linhas 7, 10, 13, 16, 19 e 22 da figura 3) não inserimos nenhuma classe ainda. Isso é porque começaremos a utilizar as classes próprias do Grid neles.
Criando Linhas e Colunas
Antes de mais nada, para que possamos utilizar tudo o que está por vir, o container principal precisa ter a classe grid. É ela que, combinada às demais classes que ainda estão por vir, faz toda a mágica acontecer.
Vamos imaginar que queremos construir um layout que estará dividido em um quadro com duas colunas e três linhas. Para definir que teremos duas colunas no Grid, utilizamos uma classe (ou conjunto de classes, levando em consideração que nem sempre iremos utilizar apenas duas colunas) chamada grid-cols-2. Já para criar três linhas, utilizaremos a classe grid-rows-3. Estes números utilizados para ambas as classes, é claro, pode ser aumentado ou diminuído conforme a demanda da aplicação, mas sempre com mesma estrutura: grid-(cols ou rows)-n, onde n é a quantidade desejada para a linha ou coluna.
Por capricho, também foram adicionadas as seguintes classes no container principal:
- Gap-4: cria um espaçamento externo de 16 px entre os elementos do container principal;
- P-4: define um espaçamento interno para o container principal no mesmo valor citado (16 px).
Definindo o tamanho ocupado por um elemento do Grid
Utilizando as classes grid, grid-cols-n e grid-rows-n (onde, repito, o n é o número de linhas ou colunas desejadas) já somos capazes de fazer muita coisa dentro do conceito de Grid. Todavia, nem sempre isto é suficiente: para definir um tamanho de um único elemento dentro da grade em específico, por exemplo, não conseguiríamos fazê-lo apenas com estas classes.
Imagine que você gostaria que o primeiro e o quinto elementos do Grid ocupassem duas linhas ao invés de apenas uma, como é o caso dos demais. Para fazer tal feito, é necessário utilizar a classe row-span-n, onde n é o número de linhas que desejamos que o elemento ocupe (no nosso caso, ficaria row-span-2). Da mesma forma, podemos definir quantas colunas cada elemento deve ocupar, por meio da classe cols-span-n.
Estamos avançando consideravelmente, mas ainda há algo errado. Claramente a proporcionalidade foi pelos ares e as imagens não estão sendo distribuídas em um tamanho equivalente ou esperado, não acha?
Isto acontece porque, se você parar para analisar o container principal, definimos que o Grid só teria três linhas. Todavia, da forma como configuramos cada elemento, é como se ele tivesse quatro. Basta fazer essa pequena correção (mudar o número de colunas de três para quatro no container principal) e tudo ficará na mais perfeita conformidade que esperávamos.
É importante afirmar que o número de classes é de 15 para a definição de colunas e 7 para a definição de linhas. Isso quer dizer que, com o uso das classes que o Tailwind CSS disponibiliza, só podemos utilizar 15 colunas e 6 linhas em um determinado Grid. Todavia, é possível criar novas classes, como já foi citado no começo deste artigo enquanto falávamos um pouco sobre o Tailwind CSS.
Se você utilizou o CDN para a instalação, você deve inserir o script da figura 12 no head do seu documento HTML. Para casos onde um arquivo tailwind.config.js foi criado em seu projeto durante a instalação, adicione os objetos gridTemplateColumns e gridTemplateRows dentro de extend:
Esta regra se aplica a qualquer quantidade necessária de linhas ou colunas que extrapolam o limite do Tailwind. Basta mudar o número que inserimos e voilà! Está feito.
Considerações Finais
E aí, achou fácil o uso do Grid com o Tailwind CSS? Eu, particularmente, acho relativamente bem mais prático, se comparado a como fazemos utilizando apenas o CSS. Com estes conceitos, é possível criar qualquer tipo de layout Grid, além de definir quaisquer tamanhos específicos para cada elemento envolvido. Basta você, a partir de agora, praticar, criar designs incríveis com o Tailwind e pronto!
Bons estudos!
A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.