Vamos continuar da onde paramos. Se você não acompanhou os últimos artigos, recomendo que o faça.
Caso tenham perdido:
Vamos pensar um pouco!
Finalmente nosso layout está pronto. Se olharmos na pen abaixo, podemos confirmar que a proposta que nós tínhamos foi atingida com êxito e sem muita dificuldade (vide parte 2).
Essa é a uma das maravilhas do CSS Grid Layout. Podemos criar um site, página ou view (dependendo do projeto), sem ficar dependendo de frameworks CSS pra fazer rápido. Ou seja, de maneira nativa e sem ficar quebrando a cabeça para posicionar os elementos.
Obviamente isso não exclui a necessidade de estudar e aprender CSS (como falei na primeira parte), mas com certeza facilita nosso trabalho, e se adotarmos essas tecnologias mais novas, é certo que levaremos o desenvolvimento web para novos níveis.
Veja só o que ocorreu e ainda ocorre com JavaScript – olha só o quanto ele evoluiu e hoje em dia está em todo lugar: back-end, front-end e até mesmo fora da Web, em dispositivos como os controladores da NASA, por exemplo.
Não estou dizendo que a NASA vai levar o CSS pra Lua (ou vai?). Meu ponto é: a web é a plataforma que mais cresce hoje em dia. Tudo está rodando em torno disso e é natural que as bases (HTML, CSS e JS) evoluam como consequência desse crescimento.
E se o CSS está evoluindo mais rapidamente, por que não usar essas novas propriedades? Por que não podemos adotar isso?
Suporte a navegadores antigos não é mais desculpa. Como comentei na primeira parte, é possível aliar o novo ao velho! E como conseguir isso? Como ter essa boa base que nos possibilita usar CSS Grid Layout sem se esquecer dos antigos navegadores?
Simples: entendendo que CSS não é decoreba, e que existem algumas regras para o comportamento do CSS, e entender isso faz toda diferença pra criar estilos de fácil entendimento, organização e manutenção.
Confesso que aprendi CSS de maneira errada – fiquei muito dependente do Bootstrap, e quando vi que precisava de coisas mais especificas, me dei mal. Por isso, agora que finalmente estou entendendo (aprendendo) a maravilha que é o CSS, faço questão de falar de sua importância e tento compartilhar os meus aprendizados de maneira simples para que todos possam entender.
CSS é legal, vai. É você que não deu uma chance pra ele ainda, mas te garanto que pode se divertir muito aprendendo e se aprofundando. Então vamos aprender mais um pouquinho sobre Grid e CSS?
Let’s get down to business
Ok, agora que nossas marcações/estilização iniciais foram feitas, vamos definir os breakpoints dos nossos Media Queries.
Beleza, mas Rafael, o que é isso? Media Queries?
Calma, se você está perdido, eu explico rapidamente o que é uma Media Query e o que são Breakpoints. Vamos lá.
Media Queries, a grosso modo, são formas de limitar para um determinado tamanho ou tipo de dispositivo um conjunto de estilos utilizando Media Types e Media Features. Ou seja, consigo definir para tamanhos de tela de smartphones um conjunto de estilos que pode ser diferente de um tamanho de tela de tablets, por exemplo. Dessa forma, consigo segmentar meus estilos, mas não para por aí.
Você pode definir não somente tamanhos de tela, como também tipos de tela, resolução, etc. Ou seja, é uma poderosa ferramenta, que é muito importante na hora de criar estilos específicos para diferentes dispositivos.
E os Breakpoints? Fácil. Breakpoints são os limites definidos para aquele conjunto de estilos através dos Media Features. Um exemplo simples que posso dar é um conjunto de estilos que se aplica a dispositivos que tenham telas a partir de 320px de largura e no máximo 520px, entendeu?
Ou seja, Breakpoint é a definição da condição em que o meu conjunto de estilos começa a ser aplicado e até onde essa condição vai. Nada melhor do que elucidar com um exemplo, né?
Digamos que quero que meu estilo seja aplicado em telas de smartphones que geralmente vão de 320px até 480px, então temos que definir isso através de Media Queries. Segue o exemplo abaixo:
@media only screen and (min-width: 320px and max-width: 480px) {
// Código CSS vai aqui
}Logo acima você vê um exemplo de Media Type, e a parte onde você vê o Min e o Max Width são chamados de Media Features. A definição “max-width: 480px” é totalmente opcional, ok? Você pode definir tamanhos iniciais para suas Media Types conforme a necessidade. Por exemplo, se houver duas Media Features, uma com “min-width: 320px” e uma segunda com “min-width: 720px”, o navegador vai conseguir interpretar onde um começa e o outro termina, entendeu? Simples, né?
Mas e aquele screen logo no começo? É o tipo dispositivo no qual o conjunto de estilos vai se aplicar, ok? Tem muitos tipos, tamanhos e formas de aplicar isso. Você pode conferir aqui: MDN e aqui: W3C Schools.
Lembrando que essa é uma explicação bem rasa. Recomendo muito que leiam os artigos dos links – eles falam tudo com muita clareza.
Definindo nossas medidas
Pra ilustrar melhor tudo isso, vamos aplicar no nosso layout dois Media Types. Um para até 500px de largura e outro para até 700px, simulando a ideia de dispositivos móveis e tablets.
Consegue ver que adicionei novas propriedades no final da folha de estilos? Um Media Type especifico para dispositivos com tamanho de no máximo 500px e outro com tamanho definido de até 700px.
Então, basicamente temos três regras, uma Media Type para dispositivos móveis, um para Tablets e os estilos definidos que se aplicam a todo o resto.
Agora, a melhor parte
Como eu falei, o Grid Layout é incrível porque facilita nossa vida, né? Então, é especialmente agora que ele se mostra muito eficiente. Quer ver?
Para os dispositivos móveis, nós já temos um Media Type definido, certo? Dentro dele vamos definir um conjunto de estilos para que nossa página se comporte de uma maneira destacada. Ou seja, para que nossos elementos fiquem um em cima do outro.
Segue uma pen que demonstra exatamente o que eu quero dizer:
Como vocês podem ver, dentro das Media Queries definidas, a classe .container está bem diferente, mas especificamente eu alterei os valores do grid-template-columns, grid-template-rows e grid-template-areas.
Eu adicionei também um grid-gap apenas para reforçar visualmente a mudança de comportamento quando as condições dos media types são atendidas.
Talvez você tenha percebido as mudanças só de olhar na classe .container, mas de qualquer forma eu vou explicar o que eu fiz pra deixar o mais claro possível pra vocês.
Primeiramente eu defini uma única coluna para telas de até 500px de largura e duas colunas para telas a partir de 501px até 700px de largura utilizando o grid-template-columns, como vocês podem checar na pen acima.
Depois disso, no caso das linhas, eu defini cinco para telas de 500px e 4 para telas de até 700px de largura, utilizando a função repeat(), onde o primeiro argumento é a quantidade de vezes que quero que isso se repita e o segundo o tamanho de cada linha, também demonstrado na pen acima no caso das medidas para tablets.
Como eu já sabia exatamente quantas linhas eu precisaria para cada media type, eu defini o tamanho de cada uma delas e apenas repeti usando a função repeat(5, 1fr) — no caso dos dispositivos móveis — porém, caso eu não saiba exatamente quantas linhas a mais poderão existir, eu posso usar a propriedade grid-auto-rows, que cria um tamanho padrão para linhas que serão adicionadas posteriormente.
Usando o nosso exemplo eu poderia fazer o seguinte:
.container { grid-template-rows: 1fr; grid-auto-row: 1fr; }Pronto! Caso hajam linhas a mais, nosso grid poderá adicioná-las de forma automática e com um comportamento preestabelecido.
Ou seja, se eu não souber exatamente quantas linhas eu precisarei ter, poderei definir o comportamento padrão através da propriedade grid-auto-flow.
No grid-template-areas eu apenas posicionei os elementos conforme a minha necessidade, sem ter que fazer muito esforço. Isso significa que no caso do media type definido para smartphones, eu defini uma coluna e cinco linhas e posicionei um elemento por célula – assim eles ficaram um em cima do outro.
Já no media type definido para tablets, eu criei duas colunas e quatro linhas para que na segunda linha eu pudesse colocar a coluna-esquerda em uma coluna e o conteudo-principal na outra coluna, apenas para demonstrar o quão fácil é posicionar elementos definidos dentro dos media types.
E por fim, adicionei um grid-gap de 10px para o media type com largura máxima de 700px e um grid-gap de 5px para media type com largura máxima de 500px.
Como as minhas colunas e linhas estão utilizando a medida Fr, todos os cálculos para o tamanho que cada elemento ocupa no grid foi refeito automaticamente, sem ter que pensar muito, deixando a gente focar no que importa, que é montar no layout.
Concluindo
Sem muita dificuldade a gente montou um layout completo e responsivo e sem precisar ficar criando milhares de marcações ou deixando uma folha de estilos inchada e complexa.
Com a propriedade grid ganhamos muitas possibilidades de forma rápida e efetiva, sem precisar de gambiarra.
Obviamente esse é um exemplo bem simples e de fácil entendimento. Na vida real as coisas são geralmente complexas, mas o ponto é que a forma de se trabalhar com grid não muda. Isso é, você vai fazer muito mais escrevendo muito menos. Sem muita dificuldade é possível criar uma página responsiva e com melhor performance.
É claro que não podemos deixar de lado os navegadores mais antigos. Por isso, precisamos ter fallbacks para isso. Eu já havia comentado sobre a necessidade de entendermos sobre CSS para conseguir resolver esses casos quando isso aparecer no nosso caminho lá na primeira parte.
Caso queira, a Rachel Andrew tem um artigo muito interessante sobre isso. Está em inglês, então talvez o tradutor seja um amigo pra te ajudar nisso.
De qualquer forma eu pretendo escrever algo sobre isso posteriormente, mas, por enquanto, só o fato de entender o grid já é um grande passo: oferece grandes possibilidades sem a necessidade de frameworks CSS.
Falando nisso, Frameworks CSS x CSS nativo
Depois de falar sobre conceitos, história do CSS Grid Layout e como utilizar, chegamos no ponto que eu queria: falar sobre a necessidade de usar Frameworks CSS.
Sempre vemos artigos nos incentivando a aprender tudo de forma nativa, até porque essa é a base de tudo, mas geralmente quando o assunto é CSS os desenvolvedores muitas vezes acabam recorrendo a atalhos mais simples. Isso pode ajudar, mas também pode atrapalhar demais no aprendizado.
Eu posso falar por mim: primeiro aprendi a usar Bootstrap, depois me tornei preguiçoso para entender CSS puro, e quando precisei estilizar elementos mais detalhados dos meus projetos, me compliquei.
Utilizando Grid Layout e Flexbox em conjunto, você ganha um grande poder para criar qualquer layout de maneira rápida e performática – salvo casos muito específicos.
Não houve nenhuma propriedade como CSS Grid Layout, por isso recomendo fortemente que aprendam, utilizem e façam experiências, mas garanto que vai valer muito a pena no final.
E é isso. Espero que tenham gostado dessa pequena série. Minhas redes sociais estão de portas abertas para trocar uma ideia ou receber um feedback. No que eu puder ajudar, ajudarei sem dúvidas.
Tem algum comentário? Alguma dúvida? É só comentar que a gente troca uma ideia!
Valeu!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?