O CSS Grid layout foi uma especificação proposta pela Microsoft e aceita/implementada pela W3C, que é a organização que cuida de todos os padrões da web, ou seja, ela é quem diz o que vai ou não funcionar quando se fala em desenvolvimento web.
Esse padrão é novo. Portanto, ainda tem browsers que não implementaram totalmente a tecnologia. Mas, já te adianto logo: Aprenda esse carinha, pois ele é o futuro.
Definição:
CSS Grid layout é uma Especificação do W3C projetada para proporcionar um método bi-dimensional para criação de layout CSS que oferece a possibilidade de "layoutar" itens da página com uso de linhas e colunas. - Mozilla
Mas afinal, o que dá pra fazer com ele?
Com o Grid layout, podemos escrever/desenhar layouts inteiros de sites apenas com alguns comandos, como esse da foto de capa. Ahhh também dá para fazer a mesma coisa que o flexbox faz, mas de forma bem mais simples e rápida. Fora que tem gente que usa o flexbox para criar o layout do site (lê-se gambiarra), mas esse não é o seu propósito.
O que você perde por não usar o Grid layout?
Basicamente você perde tempo (lê-se dinheiro) com os projetos que desenvolve.
Eu me deparei uma vez com uma situação em que eu tinha que colocar várias colunas com diversos conteúdos, cada. E essas colunas tinham que ter o mesmo tamanho, não importava se na primeira tinha 1 frase e a última 10. Graças ao grid layout, eu resolvi esse problema com 3 linhas de CSS (sem exagero).
Claro que uma pessoa que manja muito flexbox também pode resolver o mesmo problema no mesmo período de tempo, mas cá entre nós, o flexbox já está começando a ficar ultrapassado e o grid layout está vindo cheio de novidade.
O intuito desse post foi mais de apresentação da tecnologia, porém, estou pensando em fazer uns guias introdutórios do poder do grid para vocês.
PS: Esse não foi um tutorial, mas a dica de música de hoje é: Cidadão de papelão - O teatro mágico