Parece que o CSS Grid já vem há muito tempo, mas agora parece que está chegando a um ponto em que as pessoas estão falando mais e mais sobre ele e que está se tornando algo que devemos aprender. Comecei a ler alguns posts e brincar com a sintaxe nas últimas semanas, mas pedi à minha colega CSS-Trickster Miriam Suzanne para grocá-lo comigo em um hangout de vídeo.
Gastamos nosso tempo investigando o básico do CSS Grid e o que aprendemos é que é muito menos assustador começar a usá-lo do que qualquer um de nós esperava. Começamos com um exemplo simples e depois examinamos as propriedades do CSS Grid para aprender com que outras coisas ele é capaz de lidar sem ir muito longe no mato.
Aqui estão alguns recursos que mencionamos durante nosso bate-papo que vale a pena vincular a:
- A Complete Guide to Grid - Uma visão geral abrangente do CSS Grid, incluindo suas propriedades e um glossário de termos e conceitos importantes.
- CodePen Demo - Este é o exemplo simples com o qual começamos no vídeo e avançamos conforme avançamos.
- CSS Grid e Grid Highlighter - Esta ferramenta foi mencionada no final e fornece uma maneira de visualizar o layout da grade usando o Firefox DevTools.