CSS

CSS Grid - 5 Dicas para Dominares

5 dicas para dominares CSS Grid

5 dicas para dominares CSS Grid 1240 700 Bruno Brito

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! ????

CSS Grid no Can I Use

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 - o curso de Wes Bos

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.

CSS Grid Garden

#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.

CSS Grid no 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

#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 calculadoraeste é 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!

Se quiser entrar em contacto comigo, pode enviar-me um e-mail para [email protected] ou preencher o formulário abaixo.

NOTA: Todos os campos são de preenchimento obrigatório.