Layout de grade

O Layout de Grade ("a Grade") CSS3 (Folhas de Estilos em Cascata, Nível 3) é uma novidade no Internet Explorer 10 e nos aplicativos da Windows Store que usam JavaScript. Como no Flexbox, a Grade permite mais fluidez de layout do que é possível com posicionamento usando flutuações ou script. Ele permite que você divida o espaço para grandes regiões de uma página da Web ou aplicativo Web, e defina o relacionamento entre as partes de um controle HTML em termos de tamanho, posição e camada.Isso remove a necessidade de criar um layout fixo, que não pode tirar proveito do espaço disponível na janela do navegador.

O Layout de Grade CSS3 ainda estava em desenvolvimento na ocasião em que este documento foi redigido. A implementação do Layout de Grade CSS3 no pré-lançamento atual baseia-se no módulo Layout de Grade CSS, que é atualmente uma Versão de Trabalho Preliminar do W3C (World Wide Web Consortium).

Como a Grade permite alinhar elementos em colunas e linhas, mas não tem nenhuma estrutura de conteúdo, ela também permite cenários que não são possíveis com tabelas HTML. Usando a Grade em conjunto com consultas de mídia, você pode habilitar o layout para adaptar-se perfeitamente às mudanças no fator forma do dispositivo, na orientação, no espaço disponível e muito mais.

O elemento de Grade

O bloco de construção básico do Layout de Grade é o elemento Grid, que é declarado definindo a propriedade display de um elemento como -ms-grid (para um elemento Grid em nível de bloco) ou -ms-inline-grid (para um elemento Grid em nível embutido). (Devido ao status de versão preliminar do Layout de Grade, esse valor e todas as propriedades desta seção devem ser usados com o prefixo de fornecedor específico da Microsoft, ou seja, "-ms-", para funcionar com o Internet Explorer 10 e os aplicativos da Windows Store que usam JavaScript no Windows 8.) Por exemplo, o seguinte exemplo de código cria uma Grade no elemento que tem uma ID "myGrid":


<style>
#myGrid {
  display: -ms-grid;
  background: gray;
  border: blue;
}
</style>


Faixas (colunas e linhas)

Após criar um elemento de Grade, aplique tamanhos às suas colunas e linhas usando as seguintes propriedades:

PropriedadeDescrição

-ms-grid-columns

Especifica a largura de cada coluna na Grade. Cada coluna é delimitada usando um espaço.

-ms-grid-rows

Especifica a altura de cada linha na Grade. Cada linha é delimitada usando um espaço.

 

Você pode dimensionar colunas e linhas (coletivamente chamadas de faixas) usando qualquer uma das seguintes opções:

  • unidades de comprimento padrão ou uma porcentagem da largura (para colunas) ou da altura (para linhas) do objeto
  • a palavra-chave auto, indicando que a largura da coluna ou a altura da linha é baseada no tamanho dos itens dentro dela
  • a palavra-chave min-content, indicando que a largura ou a altura mínima de qualquer elemento filho é usada como a largura ou a altura
  • a palavra-chave max-content, indicando que a largura ou a altura máxima de qualquer elemento filho é usada como a largura ou a altura
  • a palavra-chave minmax(a, b), indicando que a largura ou a altura máxima fica entre a e b, como o espaço disponível permite
  • unidades fracionárias (fr), indicando que o espaço disponível deve ser dividido entre as colunas ou as linhas de acordo com seus valores fracionários, conforme ilustrado no exemplo a seguir
Para um exemplo de unidades fracionárias, considere a seguinte versão expandida do seletor de ID"myGrid" :

<style>
#myGrid {
  display: -ms-grid;
  background: gray;
  border: blue;
  -ms-grid-columns: auto 100px 1fr 2fr;
  -ms-grid-rows: 50px 5em auto;
}
</style>


Essa Grade tem quatro colunas, e cada coluna aparece conforme descrito aqui:

  • Coluna 1 (palavra-chave auto): a coluna é ajustada a seu conteúdo.
  • Coluna 2 ("100px"): a coluna tem 100 pixels de largura.
  • Coluna 3 ("1fr"): a coluna ocupa uma unidade fracionária do espaço restante.
  • Coluna 4 ("2fr"): a coluna ocupa duas unidades fracionárias do espaço restante.

Como há três unidades fracionárias totais nessa grade, à Coluna 3 é alocada 1 unidade fracionária dividida por 3 unidades fracionárias—ou 1/3—do espaço restante. À Coluna 4 são alocados 2/3 do espaço restante.

Da mesma forma, essa Grade tem três linhas, e cada linha aparece conforme descrito aqui:

  • Linha 1 ("50px"): a linha tem 50 pixels de altura.
  • Linha 2 ("5em"): a linha tem 5 em de altura.
  • Linha 3 (palavra-chave auto): a linha é ajustada a seu conteúdo.

Repetindo faixas da Grade

Se há um grande número de colunas ou linhas que são iguais ou exibem um padrão recorrente, uma sintaxe de repetição pode ser aplicada para definir as colunas ou linhas em forma mais compacta. Os dois exemplos a seguir são equivalentes. Há uma única linha e um padrão repetitivo de faixas de coluna: uma coluna de 250 px seguida de uma medianiz de 10 px.


<style type="text/css">
  #grid {
    display: -ms-grid;
    -ms-grid-columns: 10px 250px 10px 250px 10px 250px 10px 250px 10px;
    -ms-grid-rows: 1fr;
  }	

  /* Equivalent definition. */
  #grid {
    display: -ms-grid;
    -ms-grid-columns: 10px (250px 10px)[4];
    -ms-grid-rows: 1fr;
  }
</style>


Itens de Grade

Os elementos filho da Grade são chamados de Itens de Grade e são posicionados usando as seguintes propriedades:

PropriedadeDescrição

-ms-grid-column

Especifica em qual coluna posicionar o item de Grade.

-ms-grid-row

Especifica em qual linha posicionar o item de Grade.

 

O sistema de numeração de faixas é um índice baseado em 1, sendo 1 o padrão. Dada a Grade declarada anteriormente, considere os seguintes dois seletores de ID:


#item1 {
  background: maroon;
  border: orange solid 1px;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
#item2 {
  background: lightgray;
  border: red solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

Agora, aplique esses seletores à seguinte marcação:


<div id="myGrid">
  <div id="item1">Item 1</div>
  <div id="item2">Item 2</div>
</div>


Você pode exibir essa página. (O Internet Explorer 10 é necessário para esta página ser renderizada corretamente.)

Exemplo de itens de grade

Alinhando itens de Grade

Você pode posicionar os itens de Grade ao longo de qualquer uma das bordas das células formadas pelas colunas e linhas que o item abrange, usando as seguintes propriedades:

PropriedadeDescrição

-ms-grid-column-align

Especifica o alinhamento horizontal do item na coluna da Grade. Os valores possíveis são center, end, start e stretch.

-ms-grid-row-align

Especifica o alinhamento vertical do item na linha da Grade. Os valores possíveis são center, end, start e stretch.

 

Modifique o seletor "item2" da seguinte forma (adicionando as quatro últimas linhas):


#item2 {
  background: lightgray;
  border: red solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  width: 40px;
  height: 30px;
  -ms-grid-column-align: end;
  -ms-grid-row-align: center;
}

Além disso, adicione o seguinte seletor:


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

Agora, aplique esses seletores à seguinte marcação:


<div id="myGrid">
  <div id="item1">Item 1</div>
  <div id="item2">Item 2</div>
  <div id="item3">Item 3</div>
</div>


Você pode exibir essa página. (O Internet Explorer 10 é necessário para que a página seja renderizada corretamente.)

Exemplo de alinhamento e posicionamento de grade

Empilhando itens de Grade

Você pode empilhar itens de Grade simplesmente posicionando-os nas mesmas colunas ou linhas. Por padrão, um item que vier depois na marcação será adicionado sobre os itens que vierem antes dele.

Para demonstrar isso, altere o seletor do Item 3 de forma que seja posicionado na coluna 2 e linha 2, que é onde o Item 2 está localizado:


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

Como o div do Item 3 vem após o div do Item 2, o Item 3 é adicionado sobre o Item 2. Você pode exibir essa página. (O Internet Explorer 10 é necessário para que a página seja renderizada corretamente.)

Exemplo de empilhamento de grade

Para substituir esse comportamento padrão, use a propriedade z-index:

PropriedadeDescrição

z-index

Especifica a camada (índice z) do item na célula da Grade.

 

Enquanto a propriedade z-index normalmente se aplica somente a objetos com a propriedade position não definida como static, a propriedade z-index de aplica a itens de grade mesmo que a propriedade position esteja definida como static.

No seletor do Item 3, atribua um valor "-1" à propriedade z-index para enviar esse item para trás na ordem de empilhamento:


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  z-index: -1;
}

Isso fará o Internet Explorer 10 adicionar o Item 2 sobre o Item 3. Você pode exibir essa página. (O Internet Explorer 10 é necessário para que a página seja renderizada corretamente.)

Abrangendo itens de Grade

Você pode fazer os itens de grade abrangerem várias colunas ou linhas usando as seguintes duas propriedades:

PropriedadeDescrição

-ms-grid-column-span

Especifica o número de colunas da Grade que o item abrange. O valor padrão é "1".

-ms-grid-row-span

Especifica o número de linhas da Grade que o item abrange. O valor padrão é "1".

 

No seletor do Item 3, atribua um valor "4" à propriedade -ms-grid-column-span (e altere o valor da propriedade -ms-grid-column para "1") para que ele abranja quatro larguras de coluna (todas as colunas):


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  z-index: -1;
  -ms-grid-column-span: 4;
}

Você pode exibir essa página. (O Internet Explorer 10 é necessário para que a página seja renderizada corretamente.)

Esteja ciente de que se você tentar abranger além do número de colunas ou linhas definidas na Grade (como no exemplo anterior, se você deixar o valor da propriedade -ms-grid-column como "2" e definir a propriedade -ms-grid-column-span como "4", você terá excedido o número de colunas definidas por 1), outra coluna ou linha será implicitamente criada, e sua largura ou altura será definida com auto (ajustar ao conteúdo) para toda coluna ou linha além do número definido.

Referência de API

Grid Layout

Amostras e tutoriais

Exemplo de sobreposição de grade CSS
Como criar um layout adaptável com grade CSS
Design de sites adaptáveis

Demonstrações do Test Drive do Internet Explorer

Prática: layout de grade CSS3
O sistema de grade
Gridddle

Postagens no blog do IE

Visualização da plataforma do IE10 e recursos CSS para layouts adaptáveis

Especificação

Layout de Grade CSS

 

 

Mostrar:
© 2014 Microsoft