CSS Grid (também conhecido por Grid Layout) é uma fantástica nova forma de resolver problemas complexos de CSS – especialmente quando combinado com Flexbox!
É uma novidade relativamente recente no mundo do CSS (o Firefox foi o primeiro a implementar este módulo, em Março de 2017), mas já conta com excelente suporte em termos de browsers – à data deste artigo, já quase 90% dos utilizadores, a nível mundial, utlizam browsers compatíveis com esta tecnologia! ✌️
Enquanto programador web, faz todo o sentido aprenderes a dominar esta nova forma de criação de layouts. Aqui ficam as minhas dicas, que certamente te facilitarão na aprendizagem pelo caminho.
#1: Começa por consultar alguns cursos online (gratuitos) de CSS Grid
Se gostas de aprender a ver vídeos, o melhor será provavelmente consultares um destes 2 cursos:
- CSS Grid, um curso gratuito de Wes Bos (25 vídeos);
- Learn CSS Grid for free, um curso gratuito de Per Harald Borgen (14 vídeos).
O Wes Bos é o meu formador favorito de programação e este é mais um excelente curso da sua autoria. O Wes é excelente a simplificar qualquer questão aparentemente mais complexa, e fornece sempre bons exemplos para rapidamentes veres a aplicação de um conceito na prática. Frequentei este curso e recomendo a 100%.
O 2º curso nunca consultei (visto que entretanto comecei a sentir-me confortável com CSS Grid), mas é da autoria de um senhor que acompanho com frequência no Medium, e que é o co-fundador da plataforma de formação online Scrimba (óptima para programadores). Certamente terá um conteúdo similar.
Ambos os cursos são gratuitos, portanto não tens nada a perder.
Se preferires aprender de uma maneira um pouco mais divertida, podes experimentar o Grid Garden, que é parecido com o Flexbox Froggy. Poderá ser uma forma um pouco mais suave de começar, com conteúdos mais interactivos – um bocado ao jeito do Codecademy.
#2: Consulta a melhor documentação que anda por aí
Quando já tiveres uma ideia do que permite, o mais provável será recorreres ao Google para refrescar a memória ou resolver problemas pontuais. E vais reparar que os resultados sugeridos serão sempre os mesmos.
Estes 3 links vão-te ajudar com muita frequência:
- MDN Web Docs: a “bíblia” para tudo o que esteja relacionado com CSS, da malta da Mozilla.
- CSS Tricks: um dos blogs mais importantes de front-end web development, fundado por Chris Coyier.
- Grid by Example: um site de Rachel Andrew, programadora que trabalha com a especificação desde os primórdios, e que até já publicou um livro sobre assunto.
#3: Utiliza o browser certo para debugging de CSS Grid
O Chrome costuma ser a minha escolha enquanto browser para programar, mas ainda não está tão desenvolvido para resolver problemas relacionados com este módulo.
O melhor, por agora, é mesmo recorreres à versão do Firefox para programadores, que tem um conjunto de ferramentas específicas para isto – o Firefox Developer Edition.
Este é, de resto, um óptimo browser, com várias ferramentas bem úteis para programadores, como a ferramenta para screenshots (capturas de ecrã) e um responsive design mode mais poderoso.
#4: Precisas de mais ajuda? Recorre a ferramentas WYSIWYG de CSS Grid
As ferramentas WYSIWYG (What You See Is What You Get) têm como objectivo facilitar a vida dos programadores: clicas nos botões de um interface gráfico e o código é escrito por ti. O problema? Raramente geram código HTML/CSS legível e correcto.
Estas 2, felizmente, geram markup muito similar à de um humano – o que significa que também poderá ser uma óptima forma de aprenderes, ou até de resolveres um problema particularmente complicado.
- Griddy, uma solução mais simples.
- CSS Grid Builder, uma solução bem mais sofisticada, da malta da CoffeeCup.
#5: Constrói algo divertido para praticar!
Para interiorizar os conceitos de CSS Grid, nada como praticares ao máximo nos teus projectos, sejam eles pessoais ou profissionais. Se não sabes o que criar, podes sempre visitar um site como o CodePen para inspiração.
Podes por exemplo tentar criar uma calculadora – este é um óptimo exemplo – ou uma grelha Masonry (ao estilo do Pinterest) como este poster da Marvel.
See the Pen MARVEL POSTER [CSS GRID] by Dannie Vinther (@dannievinther) on CodePen.
Se seguires estas dicas, estou certo que dominarás CSS Grid sem qualquer problema. Tens algum conselho que não consta neste artigo? Manifesta-te nos comentários!
