Compreender o layout da grade em um artigo

Qual é o layout da grade?

GridEsse layout de grade de layout, é um novo CSSmodelo de layout, melhor em uma página ser dividido em várias áreas principais, bem como definir o tamanho dessas regiões, posição, nível e outras relações. Afirma ser o mais poderoso do CSSlayout do programa, atualmente é o único CSSlayout bidimensional. Use Gridlayout, podemos facilmente conseguir semelhante ao seguinte layout, endereço de demonstração

Layout de grade e layout flexível

Falando sobre o layout, vamos pensar flexno layout, e até sugerimos que tantos quanto o flexlayout, e parece que não há necessidade de conhecer Grido layout. Porém, flexo layout e Grido layout possuem uma diferença substancial, ou seja, flexo layout é unidimensional, Grido layout é um layout bidimensional . flexO layout só pode lidar com o layout de elementos em uma dimensão de cada vez, uma linha ou uma coluna. GridO layout é para dividir o contêiner em "linhas" e "colunas" para produzir uma grade. Podemos colocar os elementos da grade em posições relacionadas a essas linhas e colunas para atingir nosso propósito de layout.

GridLayout do que o flexlayout do forte!

Exemplo de layout flexível:

Exemplo de layout de grade:

Alguns conceitos básicos de Grid

Usamos Grid para implementar um pequeno exemplo para demonstrar alguns conceitos básicos de Grid e demonstrar o endereço

<div class="wrapper">
  <div class="one item">One</div>
  <div class="two item">Two</div>
  <div class="three item">Three</div>
  <div class="four item">Four</div>
  <div class="five item">Five</div>
  <div class="six item">Six</div>
</div>
复制代码

.wrapper {
  margin: 60px;
  
  display: grid;
  
  grid-template-columns: repeat(3, 200px);
  
  grid-gap: 20px;
  
  grid-template-rows: 100px 200px;
}
.one {
  background: #19CAAD;
}
.two { 
  background: #8CC7B5;
}
.three {
  background: #D1BA74;
}
.four {
  background: #BEE7E9;
}
.five {
  background: #E6CEAC;
}
.six {
  background: #ECAD9E;
}
.item {
  text-align: center;
  font-size: 200%;
  color: #fff;
}
复制代码

Container e projeto: Declaramos sobre os elementos display：gridou display：inline-gridpara criar um container de malha. Assim que fizermos isso, todos os filhos imediatos deste elemento se tornarão itens de grade. Tais como os .wrapperelementos acima , como uma grade onde o contêiner será itens de grade de elemento filho imediato.

Grade de trilha: grid-template-columnse grid-template-rowsatributos para definir uma grade de linhas e colunas. As áreas horizontais dentro do contêiner são chamadas de linhas e as áreas verticais são chamadas de colunas. A figura acima One, Two, Threea composição da Onefila, Fouré um

Unidade de grade: uma unidade de grade é a menor unidade em um elemento de grade. Conceitualmente, é na verdade muito semelhante a uma célula em uma tabela. Figura acima One, Two,, Three... Fouré uma das unidades de grade

Linha de grade: a linha que divide a grade, chamada de "linha de grade". Deve-se notar que quando definimos uma grade, definimos uma trilha de grade, não uma linha de grade. A grade criará linhas de grade numeradas para que possamos localizar cada elemento da grade. A coluna m tem m + 1 linhas de grade verticais, e a linha n tem n + 1 e linhas de grade horizontais. Por exemplo, no exemplo acima, existem 4 linhas de grade verticais. De um modo geral, os números são classificados da esquerda para a direita, de cima para baixo, 1, 2 e 3. Claro, você também pode classificar os números da direita para a esquerda, de baixo para cima, na ordem de -1, -2, -3 ...

Introdução às propriedades do contêiner

GridMuitos atributos e valores relacionados ao layout requerem muita memória, é recomendável democombiná- los para entender o lado do código e depois usar algum tempo livre para lembrar. Vou apresentar cada atributo quando for uma pequena demodemonstração, sugiro que você pode modificar sua própria visão do efeito para melhorar a memória

GridOs atributos de layout podem ser divididos em duas categorias, uma é os atributos do contêiner e a outra são os atributos do item. Vejamos primeiro as propriedades do contêiner

atributo de exibição

demonstração de propriedade de exibição

Por meio de uma declaração sobre os elementos display：gridou display：inline-gridpara criar um contêiner de malha. Declarar que display：grido navio é um elemento de bloco, desde que display: inline-grido elemento de linha dentro do elemento de contêiner

.wrapper {
  display: grid;
}
复制代码

.wrapper-1 {
  display: inline-grid;
}
复制代码

propriedade de colunas de modelo de grade e propriedade de linhas de modelo de grade

Endereço de demonstração das propriedades das colunas do modelo da grade e das linhas do modelo da grade

grid-template-columnsDefinindo as propriedades de largura da coluna, grid-template-rowslinha de propriedade alta, esses dois atributos Gridparticularmente importantes no layout, seus valores são diversos, mas sua disposição é mais semelhante, para o seguinte grid-template-columnsexplicar as propriedades

Largura da coluna e altura da linha fixas

.wrapper {
  display: grid;
  
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  
  grid-template-rows: 50px 50px;
}
复制代码

O acima significa que a largura fixa da coluna é 200px 100px 200px e a altura da linha é 50px 50px

Função repeat () : pode simplificar valores repetidos. Esta função aceita dois parâmetros, o primeiro parâmetro é o número de repetições e o segundo parâmetro é o valor a ser repetido. Por exemplo, as alturas das linhas acima são todas iguais, podemos conseguir isso, o efeito real é exatamente o mesmo

.wrapper-1 {
  display: grid;
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  /*  2行，而且行高都为 50px  */
  grid-template-rows: repeat(2, 50px);
}
复制代码

Palavra-chave de preenchimento automático: indica preenchimento automático, de forma que o maior número possível de células possa ser acomodado em uma linha (ou coluna). grid-template-columns: repeat(auto-fill, 200px)Indica que a largura da coluna é de 200 px, mas o número de colunas não é fixo. Contanto que o navegador possa acomodá-lo, você pode colocar elementos. O código e o efeito são mostrados na figura a seguir:

.wrapper-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

fr Palavras - chave : O Gridlayout também apresenta uma unidade de comprimento adicional para nos ajudar a criar trilhas de grade flexíveis. frA unidade representa uma parte igual do espaço disponível no contêiner da grade. grid-template-columns: 200px 1fr 2frIndica que a largura da primeira coluna está definida para 200px e a largura restante é dividida em duas partes, as larguras são, respectivamente, 1/3 e 2/3 da largura restante. O código e o efeito são mostrados na figura abaixo:

.wrapper-3 {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

Função minmax () : às vezes queremos dar ao elemento da grade um tamanho mínimo e máximo.A minmax()função gera uma faixa de comprimento, o que significa que o comprimento pode ser aplicado ao projeto da grade dentro desta faixa. Aceita dois parâmetros, mínimo e máximo. grid-template-columns: 1fr 1fr minmax(300px, 2fr)Significa que a largura da terceira coluna é de pelo menos 300 px, mas o máximo não pode ser maior que o dobro da largura da primeira e da segunda colunas. O código e o efeito são os seguintes:

.wrapper-4 {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(300px, 2fr);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

Palavra-chave automática : o comprimento é determinado pelo navegador. Por autopalavra-chave, podemos facilmente obter um layout de três ou duas colunas. grid-template-columns: 100px auto 100pxIndica que a primeira e a terceira colunas têm 100 px e o comprimento é determinado pelo navegador. O código e o efeito são os seguintes:

.wrapper-5 {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

propriedade grid-row-gap, propriedade grid-column-gap e propriedade grid-gap

Atributo de lacuna de linha de grade, atributo de lacuna de coluna de grade e endereço de demonstração de atributo de lacuna de grade

grid-row-gapAtributos e grid-column-gapatributos definem o espaçamento de linha e espaçamento de coluna, respectivamente. grid-gapAtributo é uma forma abreviada de ambos.

grid-row-gap: 10pxIndica que o espaçamento entre linhas é de 10 px e grid-column-gap: 20pxque o espaçamento das colunas é de 20 px. grid-gap: 10px 20pxO efeito alcançado é o mesmo

.wrapper {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

.wrapper-1 {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-auto-rows: 50px;
  grid-row-gap: 10px;
  grid-column-gap: 20px;
}
复制代码

Os dois métodos de escrita acima têm o mesmo efeito.

grid-template-areas 属性

endereço de demonstração de área de grade e áreas de modelo de grade

grid-template-areas Os atributos são usados ​​para definir áreas, e uma área é composta por uma ou mais células

Geral Esta propriedade com elementos de malha grid-areausados ​​juntos, estamos aqui para apresentar juntos. grid-areaO atributo especifica em qual área o item é colocado

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px  120px  120px;
  grid-template-areas:
    ". header  header"
    "sidebar content content";
  background-color: #fff;
  color: #444;
}
复制代码

O código acima está dividido em 6 representa células, o que vale a pena notar que o .símbolo representa a célula vazia, ou seja, a célula não é usada.

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}
复制代码

O código acima mostra que um .sidebar .content .headerelemento de classe está localizado no topo grid-template-areasda sidebar content headerárea definida

propriedade grid-auto-flow

endereço de demonstração da propriedade grid-auto-flow

grid-auto-flowOs atributos controlam como o algoritmo de layout automático funciona, especificando precisamente como os elementos que são dispostos automaticamente na grade são organizados. A ordem padrão é colocado "na primeira linha", isto é, para preencher a primeira linha, depois para a segunda linha começa, isto é, a sequência na figura alfanumérico one, two, three.... O pedido pela grid-auto-flowpropriedade determina que o valor padrão é row.

.wrapper {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

Alunos atentos podem ter encontrado um problema, ou seja, há uma lacuna entre o quinto item e o sexto item (como mostra a figura abaixo). Isso ocorre porque o comprimento do sexto bloco é maior que o comprimento do espaço em branco, e foi espremido até o fundo. Causado por uma linha. Em aplicações práticas, podemos desejar o seguinte comprimento para preencher este espaço em branco com um comprimento adequado.Este tempo pode ser definido grid-auto-flow: row densepara preencher o formulário o máximo possível. O código e o efeito são os seguintes:

.wrapper-2 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row dense;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

Pode ser definido grid-auto-flow: column, indicando que a primeira coluna é seguida pela linha, o código e o efeito são mostrados na figura a seguir:

.wrapper-1 {
  display: grid;
  grid-auto-columns: 100px;
  grid-auto-flow: column;
  grid-gap: 5px;
  grid-template-rows:  50px 50px;
}
复制代码

atributo justify-items, atributo align-items e atributo place-items

Atributo de itens justificados, endereço de demonstração de atributo de alinhamento de itens

justify-itemsA propriedade define a posição horizontal do conteúdo da célula (esquerda, centro, direita) e a align-itemspropriedade define a posição vertical da célula (topo, meio, fundo)

A seguir, o atributo justify-items como um exemplo para explicar, o atributo align-items é o mesmo, mas a direção é vertical. Todos eles têm os seguintes atributos:

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
复制代码

A implementação e os efeitos do código são os seguintes:

.wrapper, .wrapper-1, .wrapper-2, .wrapper-3 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
  justify-items: start;
}
.wrapper-1 {
  justify-items: end;
}
.wrapper-2 {
  justify-items: center;
}
.wrapper-3 {
  justify-items: stretch;
}
复制代码

• start: alinhe a borda inicial da célula

• fim: alinhe a borda final da célula

• center: Centralize o interior da célula

• esticar: esticar para ocupar toda a largura da célula (valor padrão)

atributo justify-content, atributo align-content e atributo place-content

Atributo Justify-content, endereço de demonstração do atributo align-content

justify-contentO atributo é a posição horizontal de toda a área de conteúdo no contêiner (esquerda, centro, direita) e o align-contentatributo é a posição vertical de toda a área de conteúdo (superior, meio e inferior). Todos eles têm os seguintes valores de atributo.

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}
复制代码

Na seguinte justify-contentpropriedade como um exemplo para explicar, align-contentatribua Da mesma forma, apenas a direção é a direção vertical

• início - alinhe a borda inicial do contêiner
• alinhe a borda final do contêiner
• centro - o centro do contêiner

.wrapper, .wrapper-1, .wrapper-2, .wrapper-3, .wrapper-4, .wrapper-5, .wrapper-6 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
  justify-content: start;
}
.wrapper-1 {
  justify-content: end;
}
.wrapper-2 {
  justify-content: center;
}
复制代码

• espaço ao redor - O espaço em ambos os lados de cada item é igual. Portanto, o espaço entre os itens é duas vezes maior do que o espaço entre os itens e a borda do contêiner
• espaço entre - o espaço entre o item e o item é igual, não há espaço entre o item e a borda do contêiner
• espaço - uniformemente - o espaço entre o item e o item é igual, e o espaço entre o item e a borda do contêiner é do mesmo comprimento
• alongamento - quando o tamanho do item não é especificado, o alongamento ocupa todo o contêiner da grade

.wrapper-3 {
  justify-content: space-around;
}
.wrapper-4 {
  justify-content: space-between;
}
.wrapper-5 {
  justify-content: space-evenly;
}
.wrapper-6 {
  justify-content: stretch;
}
复制代码

propriedade grid-auto-columns e propriedade grid-auto-rows

endereço de demonstração da propriedade grid-auto-columns e da propriedade grid-auto-rows de demonstração

Falando sobre grid-auto-columnspropriedade e propriedade grid-auto-rowsanterior, dê uma olhada no conceito de grade implícita e de exibição

Implícita e exiba a grade : a grade contida explicitamente em seu grid-template-columnse os grid-template-rowsatributos de linha e coluna são definidos. Se você colocar algo fora da definição da grade, ou precisar de mais faixas de grade devido à quantidade de conteúdo, a grade criará linhas e colunas na grade implícita

Se for uma grade extra (ou seja, grade implícita mencionada acima), a largura da coluna e a altura da linha podem ser grid-auto-columnspropriedades e grid-auto-rowsconfigurações de propriedade. E suas palavras grid-template-columnse grid-template-rowso mesmo. Se você não especificar esses dois atributos, o navegador determinará a largura da coluna e a altura da linha da nova grade completamente com base no tamanho do conteúdo da célula

.wrapper {
  display: grid;
  grid-template-columns: 200px 100px;

  grid-template-rows: 100px 100px;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

grid-template-columnsAtributos e grid-template-rowsatributo especificam apenas duas linhas e duas colunas, mas na verdade existem nove elementos, ele terá uma grade implícita. Por grid-auto-rowsser especificado implicitamente 50px de altura das linhas de grade

Introdução de atributos do projeto

propriedade grid-column-start, propriedade grid-column-end, propriedade grid-row-start e propriedade grid-row-end

Endereço de demonstração

Você pode especificar as quatro bordas onde o item de grade está localizado, e qual linha de grade localizar respectivamente, de modo a especificar a posição do item

• propriedade grid-column-start: a linha de grade vertical onde a borda esquerda está localizada
• propriedade grid-column-end: a linha de grade vertical onde a borda direita está localizada
• propriedade grid-row-start: a linha de grade horizontal onde a borda superior está localizada
• propriedade grid-row-end: a linha de grade horizontal onde a borda inferior está localizada

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column-start: 1;
  grid-column-end: 2;
  background: #19CAAD;
}
.two { 
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  
  z-index: 1;
  background: #8CC7B5;
}
.three {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
  background: #D1BA74;
}
.four {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 5;
  background: #BEE7E9;
}
.five {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 5;
  background: #E6CEAC;
}
.six {
  grid-column: 3;
  grid-row: 4;
  background: #ECAD9E;
}
复制代码

No código acima, o .twoprojeto de grade de classe está localizado, as linhas de grade verticais são de 2 a 4, as linhas de grade horizontais são de 1-2. Entre eles, está em .threeconflito com (as linhas de grade verticais são de 3 a 4 e as linhas de grade horizontais são de 1 a 4). Você pode definir z-indexpara decidir sua hierarquia

propriedade de área de grade

grid-areaAtributo especifica o projeto em uma região que, na introdução acima grid-template-areas, quando mencionada, não há mais uma expansão específica, o uso de referência específica pode demonstrar Endereço:

endereço de demonstração de propriedade de área de grade e áreas de modelo de grade

atributo justify-self, atributo align-self e atributo place-self

justify-self attribute / align-self attribute / place-self attribute endereço de demonstração

justify-selfPropriedade do conteúdo da célula da posição horizontal (esquerda, direita), com justify-itemso uso da propriedade exatamente igual, mas atua apenas em um único projeto

align-self A propriedade define a posição vertical do conteúdo da célula (superior, médio e inferior), que é exatamente a mesma que o uso da propriedade align-items e afeta apenas um único item

Ambos muito semelhantes, aqui tomam apenas o justify-selfatributo de apresentação do align-selfatributo Da mesma forma, agindo apenas na direção vertical

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
复制代码

.item {
  justify-self: start;
}
.item-1 {
  justify-self: end;
}
.item-2 {
  justify-self: center;
}
.item-3 {
  justify-self: stretch;
}
复制代码

• start: alinhe a borda inicial da célula

• fim: alinhe a borda final da célula

• center: Centralize o interior da célula

  

• esticar: esticar para ocupar toda a largura da célula (valor padrão)

  

Layout responsivo de realização de combate real da grade

Após a introdução acima, acredito que todos podem ver que o Grid é muito poderoso. Alguns layouts CSS comuns, como centralizado, layout de duas colunas, layout de três colunas, etc., são fáceis de implementar. Vamos dar uma olhada em como o layout de grade implementa o layout responsivo

fr percebe uma resposta de divisão igual

fr percebe uma resposta de divisão igual

frA unidade de divisão igual, que pode dividir o espaço disponível do contêiner em tantos espaços de divisão iguais quanto desejado. Usando esse recurso, podemos implementar facilmente uma resposta igualmente dividida. grid-template-columns: 1fr 1fr 1frIndica que o contêiner está dividido em três partes iguais

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

repetir + ajuste automático —— fixe a largura da coluna e altere o número de colunas

O layout de alíquotas não é o único Gridlayout apenas, como o flexlayout pode ser facilmente alcançado, então olhe para responsivo mais avançado

O exemplo acima é sempre de três colunas, mas geralmente queremos que nossa grade seja capaz de fixar a largura da coluna e alterar o número de colunas de acordo com a largura do contêiner. Desta vez, podemos usar as repeat()funções e auto-fitpalavras - chave mencionadas acima . grid-template-columns: repeat(auto-fit, 200px)Indica que a largura fixa da coluna é de 200 px e o número é adaptável. Contanto que possa ser acomodado, será organizado para cima. O código e os efeitos são implementados da seguinte maneira:

Endereço de demonstração

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

repetir + ajuste automático + minmax remova o espaço em branco à direita

No efeito visto acima, geralmente há um espaço em branco no lado direito, que é o que não queremos ver. Seria ótimo se a largura da coluna também pudesse ser adaptável dentro de um determinado intervalo. minmax()A função nos ajuda a fazer isso. A grid-template-columns: repeat(auto-fit, 200px)mudança grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))indica que a largura da coluna de pelo menos 200px, se houver alíquota sobressalente junto. O código e o efeito são os seguintes:

Endereço de demonstração

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

repetir + ajuste automático + minmax-span-dense resolver o problema de vacância

Tudo parece estar indo bem, mas um dia UI, o comprimento de cada elemento da grade pode não ser o mesmo, o que é simples, spanexecutando o span para definir as palavras-chave do projeto da grade grid-column-start: span 3, indicando que a extensão do projeto 3 Grid. O código e o efeito específicos são os seguintes:

.item-3 {
  grid-column-start: span 3;
}
复制代码

Endereço de demonstração

Não, por que há um espaço em branco no lado direito? Existem alguns comprimento original é muito longo, não podemos deixar de ir, desta vez para o nosso densejogo-chave. grid-auto-flow: row denseSignifica preencher o máximo possível, sem deixar espaços em branco, o código e o efeito são os seguintes:

.wrapper, .wrapper-1 {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

.wrapper-1 {
  grid-auto-flow: row dense;
}
复制代码

Compatibilidade de layout de grade

Finalmente, fale sobre Grido layout de problemas de compatibilidade, em caniuse , podemos ver os resultados a seguir, compatibilidade geral também é boa, mas não é suportada no IE 10 ou menos. A sugestão pessoal não é um problema para usar no sistema interno da empresa, mas o TOC pode não ser adequado no momento