Introdução ao Módulo de Layout de Grade CSS

Era uma vez mesas, então margens e flutuadores, então flexbox e agora grade: CSS sempre direcionou para novas e melhores maneiras de aliviar o antigo trabalho de layouts de web de codificação. o Modelo de layout de grade CSS pode criar e atualizar o layout ao longo de dois eixos: horizontal e vertical, afetando tanto a largura e altura de elementos.

O layout da grade não depende da posição dos elementos na marcação, portanto, você pode embaralhe as veiculações de elementos na marcação sem alterar o layout. No modelo de grade, um elemento de contêiner de grade é dividido em colunas e linhas de grade (coletivamente conhecido como trilhas de grade) por linhas de grade. Agora vamos ver como criar uma grade de amostra.

Suporte de Navegador

Ao escrever este artigo, o CSS Grid Module é suportado apenas pelo navegador IE mais recente e pelo Edge. A grade CSS é em estágio experimental nos outros principais navegadores em que você tem que ativar o suporte manualmente:

• Raposa de fogo: Pressione Shift + F2, digite o seguinte comando na barra de entrada GCLI que apareceu na parte inferior do navegador: pref set layout.css.grid.enabled true.
• Cromada: Navegue pelo chrome: // flags URL e ativar Recursos da Plataforma Web Experimental.

Todo suporte de navegador principal é provável chegar cedo / meados de 2017.

Uma grade de amostra

Para transformar um elemento em um contêiner de grade você pode usar um desses três exibição propriedades:

1. display: grade; - o elemento é convertido em um contêiner de grade de bloco
2. display: grade em linha; - o elemento é convertido em um contêiner de grade in-line
3. exibição: subgrid; - se o elemento for um item de grade, é convertido em uma sub-rede que ignora as propriedades de modelo de grade e lacuna de grade

Assim como uma tabela é composta de múltiplas células de tabelas, uma grade é composto por várias células da grade. Um item de grade é atribuído a um conjunto de células da grade que é coletivamente conhecido como o área de grade.

Nós vamos criar uma grade com cinco seções (áreas da grade): superior, inferior, esquerda, direita e centro. O HTML consiste em cinco divs dentro de um contêiner div.

 
 
Topo
 
Esquerda
 
Centro
 
Certo
 
Inferior
 
 

No CSS, o áreas de modelo de grade propriedade define uma grade com diferentes áreas de grade. Em seu valor, uma string representa uma linha de grade e cada nome válido dentro de uma string representa uma coluna. Para criar uma célula de grade vazia você precisa usar o ponto (.) personagem dentro de uma string de linha.

o nomes da área da grade devem ser referenciados pelo área de grade propriedade dos itens individuais da grade.

 .grid-container largura: 500 px; altura: 500 px; display: grade; grid-template-areas: "topo superior superior" "esquerda centro direita" "inferior inferior inferior";  .grid-top grid-area: top;  .grid-bottom grid-area: bottom;  .grid-left grid-area: left;  .grid-right grid-area: right;  .grid-center grid-area: center;  

Então, esse código cria uma grade com três linhas e colunas. o topo item ocupa uma área que se estende três colunas na primeira linha e a inferior item se estende por três colunas na última linha. Cada um dos esquerda, Centro e certo itens leva uma coluna na linha do meio.

Agora precisamos atribuir dimensões para essas linhas e colunas. o grid-template-columns e grid-template-rows propriedades definir o tamanho da trilha da grade (linha ou coluna).

 .grid-container largura: 500 px; altura: 500 px; display: grade; grid-template-areas: "topo superior superior" "esquerda centro direita" "inferior inferior inferior"; grid-template-columns: 100px auto 100px; grid-template-rows: 50px auto 150px;  

É assim que a nossa grade CSS parece agora (com alguns estilos adicionais):

Espaço entre os itens da grade

Você pode adicionar espaço em branco entre colunas e linhas usando lacuna da coluna de grade e intervalo entre linhas, ou sua propriedade de longhand lacuna de grade.

 .grid-container largura: 500 px; altura: 500 px; display: grade; grid-template-areas: "topo superior superior" "esquerda centro direita" "inferior inferior inferior"; grid-template-columns: 100px auto 100px; grid-template-rows: 50px auto 150px; intervalo de grade: 5 px 5 px;  

Abaixo você pode ver que o lacuna de grade lacunas adicionadas propriedade entre os itens de grade de fato.

Alinhar o conteúdo da grade e os itens

o justificar-conteúdo propriedade do contêiner da grade (.contêiner de grade) alinha o conteúdo da grade ao longo do eixo inline (eixo horizontal) e a propriedade alinhar conteúdo, alinha o conteúdo de uma grade ao longo do eixo do bloco (eixo vertical). Ambas as propriedades pode ter um desses valores: começar, fim, Centro, espaço entre, espaço ao redor e espaço-uniformemente.

Onde aplicável, o tamanho da faixa (linha ou coluna) encolhe para caber no conteúdo quando alinhado. Dê uma olhada nas imagens do conteúdo da grade alinhado com valores diferentes abaixo.

justificar-conteúdo: iniciar;

justificar-conteúdo: fim;

justificar-conteúdo: centro;

justificar-conteúdo: espaço-entre;

justificar-conteúdo: espaço ao redor;

Justifique-conteúdo: espaço-uniformemente;

alinhar conteúdo: iniciar;

align-content: end;

alinhar conteúdo: centro;

alinhar conteúdo: espaço entre;

alinhar conteúdo: espaço ao redor;

alinhar conteúdo: espaço-uniformemente;

Tanto o justificar-conteúdo e alinhar conteúdo propriedades alinhar todo o conteúdo dentro de uma grade.

Para alinhar itens individuais dentro de suas áreas de grade, use o outro par de propriedades de alinhamento: justificar itens e alinhar itens. Ambos podem ter um desses valores: começar, fim, Centro, linha de base (alinhe os itens ao longo da linha de grade base da área) e esticam (itens preenchem toda a área).