Ao criar um aplicativo da Web, uma das primeiras coisas necessárias é uma maneira de apresentar o conteúdo do seu aplicativo.
Muitos designers usam grades imaginárias para criar um layout de conteúdo, seja para um site ou app. O grupo do CSS tem trabalhado muito para facilitar os layouts e, como parte disso, produziu o Módulo de layout de grade CSS, que agora está surgindo nos navegadores.
Esse recurso está disponível para ser testado no Chrome por trás de uma sinalização 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 CSS permite definir linhas e colunas para o 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 da grade
- Os layouts podem mudar com base em consultas de mídia, tornando o design responsivo mais fácil
- O conteúdo pode se sobrepor (ativando um layout que não é possível com outros métodos)
- O layout de grade é rápido
Este é um vídeo de visão geral que explica como funciona o layout de grade CSS (confira os slides:
Testar
Usar o layout de grade CSS no Chrome agora é fácil. Primeiro, você precisa ativar a sinalização 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 Web, conforme mostrado abaixo:
Basta clicar em Ativar para ativar a sinalização. Será exibida uma solicitação para reiniciar o navegador mais ou menos assim:
Agora, basta clicar no botão Relaunch Now para reiniciar o navegador e você pode testar o Layout de grade CSS.
Deixe sua opinião
O layout de grade CSS é um novo e ótimo primitivo para o conteúdo da Web, mas, como sempre, queremos saber a opinião dos desenvolvedores sobre ele. Há várias 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 poste um tweet sobre o que você acha. Estamos ansiosos para ver os layouts incríveis que você vai criar com esse novo recurso muito útil.