Ao criar um aplicativo da Web, uma das primeiras coisas que é necessária é uma maneira de organizar o conteúdo do seu aplicativo.
Muitos designers usam grades imaginárias para organizar o 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 teste no Chrome com uma sinalização experimental. Ele também foi implementado no IE a partir da versão 10 e provavelmente estará na maioria dos navegadores em breve.
preencha a seção 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 de grade
- Os layouts podem mudar com base em consultas de mídia, facilitando o design responsivo
- O conteúdo pode se sobrepor (permitir um layout que é impossível com outros métodos)
- O layout de grade é rápido
Assista a um vídeo de visão geral que explica como o layout de grade do CSS funciona (acesse os slides:
Testar
Usar o layout de grade CSS no Chrome agora é fácil. A primeira coisa que você precisa fazer é ativar a sinalização experimental para habilitar o recurso.
Primeiro, carregue o URL chrome://flags e role para baixo até a opção Ativar recursos experimentais da plataforma da Web, conforme mostrado abaixo:
Basta clicar em Ativar para ativar a sinalização. Você verá uma solicitação para reiniciar o navegador, como esta:
Agora, basta clicar no botão Reiniciar agora para reiniciar o navegador e você estará pronto para experimentar o Layout de grade CSS.
Deixe sua opinião
O layout de grade CSS é um ótimo novo primitivo para conteúdo da Web, mas, como de costume, todos nós gostamos de saber o que os desenvolvedores acham disso. Há muitas maneiras de dar feedback: deixe um comentário aqui, envie um e-mail para a lista de grupos de trabalho de CSS do W3C com "[css-grid]" na linha de assunto, registre bugs ou poste em um blog com sua opinião. Estamos ansiosos para ver os ótimos layouts que você vai criar com esse novo recurso super útil.