Ao criar um aplicativo da Web, uma das primeiras coisas que você precisa é uma maneira de organizar o conteúdo do app.
Muitos designers usam grades imaginárias para organizar o conteúdo, seja para um site ou um app. O grupo CSS tem trabalhado muito para facilitar os layouts e, como parte disso, criou o módulo de layout de grade do CSS, que agora está sendo lançado nos navegadores.
Esse recurso está disponível para teste no Chrome com uma flag experimental. Ele também foi implementado no IE desde a versão 10 e provavelmente estará na maioria dos navegadores em breve.
Resumo executivo
- O layout de grade do CSS permite definir linhas e colunas para seu layout
- As grades podem se adaptar para usar o espaço disponível
- A ordem do conteúdo pode ser independente da ordem de exibição do contêiner de grade
- Os layouts podem mudar com base em consultas de mídia, facilitando o design responsivo
- O conteúdo pode se sobrepor (permitir layout impossível com outros métodos)
- O layout de grade é rápido
Confira um vídeo de visão geral que explica como o layout de grade CSS funciona (os slides estão aqui:
Faça um teste
Agora é fácil usar o layout de grade CSS no Chrome. A primeira coisa que você precisa fazer é ativar a flag experimental para ativar o recurso.
Primeiro, carregue o URL chrome://flags e role a tela para baixo até a opção Ativar recursos experimentais da plataforma da Web, conforme mostrado abaixo:
Basta clicar em Ativar para ativar a flag. Um comando para reiniciar o navegador vai aparecer assim:
Agora basta clicar no botão Reativar agora para reiniciar o navegador e testar o CSS Grid Layout.
Deixe sua opinião
O CSS Grid Layout é uma ótima nova primitiva para conteúdo da Web, mas, como de costume, queremos saber o que os desenvolvedores pensam sobre ele. Há muitas maneiras de dar feedback: deixe um comentário aqui, envie um e-mail para a lista do grupo de trabalho do CSS do W3C com "[css-grid]" na linha de assunto, registre bugs ou publique no blog e twitte o que você pensa sobre isso. Esperamos ver os layouts incríveis que você vai criar com esse novo recurso super útil.