Antes da chegada do Grid Layout os designers web sofreram muito para distribuir os elementos das páginas web. No início não tínhamos distribuição nenhuma, ou seja, o conteúdo da página era distribuído de acordo com o gosto do navegador. Depois tivemos os layouts usando tabelas, e em seguida os layouts usando os recursos de float.
O Grid Layout do CSS se aproxima muito das interfaces gráficas que usamos em linguagens de programação e frameworks tais como o Java Swing, o Python Qt, Python TKinter, wxPython, etc. Este tipo de layout nos permite especificar a linha e coluna nas quais um determinado componente será colocado.
O primeiro passo para usar o Grid Layout do CSS é eleger o elemento no qual os demais componentes serão colocados. É este elemento pai que receberá o valor grid para a propriedade display. Em seguida a quantidade de colunas é definida usando-se a propriedade grid-template-columns, enquanto a quantidade de linhas é definida usando-se grid-template-rows.
Veja um página HTML completa na qual temos uma DIV que serve como grid para três outras DIVs. As DIVs filhas possuem cores de fundo diferente para que você veja as colunas e linhas ocupadas por cada uma:
Este trecho de código ou resolução de exercício faz parte do Super Pack 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos em Java, Python, VisuAlg, Portugol, Delphi, C#, C, C++, VB.NET, Golang, Pascal, Ruby, PHP, e várias outras linguagens.
Aprenda a programar resolvendo problemas do mundo real. Tudo em português, com comentários em português.
Quero Ser Apoiador(a) |
|
Link para compartilhar na Internet ou com seus amigos:
