CSS: O Guia Definitivo, 5ª Edição

Capítulo 12. Disposição da grelha

Este trabalho foi traduzido com recurso a IA. Agradecemos o teu feedback e comentários: [e-mail]

No seu início em , o CSS tinha um buraco em forma de layout no seu centro. Os designers adaptaram outras funcionalidades aos objectivos do layout, nomeadamente float e clear, e, de um modo geral, contornaram esse buraco. A disposição flexbox ajudou a preenchê-lo, mas a flexbox destina-se a casos de utilização específicos, como as barras de navegação (navbars), como se mostra no Capítulo 11.

A disposição em grelha, pelo contrário, é um sistema de disposição generalizado. Com a sua ênfase em linhas e colunas, pode, à primeira vista, parecer um regresso à disposição em tabela - e, em certos aspectos, não está muito longe - mas a disposição em grelha é muito, muito mais do que a disposição em tabela. A grelha permite que partes do design sejam dispostas independentemente da ordem de origem do documento, e até mesmo sobrepor partes do layout, se for esse o teu desejo. O CSS fornece métodos poderosamente flexíveis para definir padrões repetitivos de linhas de grelha, anexar elementos a essas linhas de grelha e muito mais. Podes aninhar grelhas dentro de grelhas ou, por exemplo, anexar tabelas ou contentores flexbox a uma grelha. E muito, muito mais.

Resumindo, o layout de grade era o sistema de layout pelo qual esperávamos há muito tempo e, em 2017, chegou a todos os principais mecanismos de navegador. Pega em muitos layouts que eram ...