Flexbox é o modelo de layout que eu mais tenho utilizado ao criar telas em CSS ultimamente, mas essa não é a única maneira de desenvolver layouts responsivos. Um outro modelo bastante utilizado é o grid que também tem sido bastante utilizado em layouts mais modernos.

Segundo a documentação da Mozilla, o Grid é uma malha formada pela interseção de um conjunto de linhas horizontais e um conjunto de linhas verticais – um dos conjuntos define colunas e outro linhas. Dentro de um grid, respeitando-se a configuração criada pelas suas linhas, pode-se inserir elementos da marcação.

Com a popularização do grid layout, diversas ferramentas foram criadas para auxiliar a utilização deste modelo de layout. Uma delas é o Grid garden, um jogo simples que busca ensinar cada funcionalidade do grid layout. Outras ferramentas legais são o Layoutit e o CSS Grid Generator que permitem criar grids de forma dinâmica e exportar o CSS gerado, facilitando o desenvolvimento.

Brincando com CSS

Buscando aprender um pouco mais sobre o grid layout, desenvolvi um jogo simples com imagens colocadas em cada célula do grid, onde você precisa mover o avião com as setas do teclado para evitar a colisão. Inspecionando o código com as ferramentas de desenvolvedor do navegador você consegue analisar como cada quadrado do jogo é uma div disposta dentro do grid layout.

Jogar Pontos: 0