Propriedades de contêiner de grade no CSS | Explicado
Este artigo fornecerá um guia abrangente para o contêiner de grade e, a esse respeito, cobrirá os seguintes conceitos fundamentais de contêiner de grade:
- O que é um recipiente de grade no CSS
- A propriedade Display
- Propriedades de contêiner de grade no CSS
- Como usar propriedades de contêiner de grade no CSS
Então, vamos começar!
O que é um recipiente de grade?
Um recipiente de grade é uma caixa/recipiente que contém itens de grade e pode colocar esses itens nas linhas e colunas.
A propriedade Display
Para criar um contêiner de grade, precisamos utilizar a propriedade Display e definir seu valor como grade ou grade embutida. O trecho abaixo mostra a sintaxe básica da propriedade Display:
exibição: valor;Exemplo 1
No trecho de código abaixo, criamos um recipiente de grade e, dentro do contêiner, declararemos cinco elementos filhos:
Primeiro item
Segundo item
Terceiro item
Quarto item
Quinto item
Sexto item
As respectivas classes de estilo para o recipiente de grade e itens de grade serão assim:
O trecho de código acima mostrará a seguinte saída:
A saída verifica se os itens de recipiente de grade e grade são estilizados de acordo com suas respectivas classes de estilo.
Propriedades de contêiner de grade no CSS
A tabela fornecida abaixo fornecerá um breve guia para as propriedades de contêiner de grade:
| Propriedades | Descrição |
|---|---|
| colunas de grade-template e linhas de grade-templos | Determine o tamanho das colunas e linhas dentro de um recipiente de grade e essas propriedades podem levar uma lista de valores separados por espaço e.g. tamanho do tamanho de tack, nome de linha. |
| Grid-template-areas | Ele determina como mostrar linhas e colunas usando itens de grade nomeados. |
| Template de grade | É uma propriedade abreviada usada para alcançar as funcionalidades de três propriedades, eu.e., colunas de plataforma de grade, linhas de plataforma de grade e áreas de grade. |
| LOW-GAP & COLUNN-GAP | Essas propriedades determinam a lacuna entre as linhas da grade e as colunas da grade, respectivamente. |
| GRID-coluna Gap e gap-lada da grade | Essas propriedades são usadas para especificar o tamanho da lacuna entre as colunas da grade e as linhas da grade, respectivamente. |
| gap de grade | É uma propriedade abreviada usada para alcançar as funcionalidades de duas propriedades i.e. GRID-coluna Gap e gap-lada da grade |
| justificar-itens | Alinha os itens da grade ao longo do eixo linhas/embutidas. |
| alinhado-itens | Alinha os itens da grade ao longo do eixo colunas/embutidos. |
| itens de lugar | É uma propriedade abreviada para propriedades alinhadas e justificadas-itens, que definem ambos em uma única declaração. |
| Justify-Content | Alinha a grade ao longo do eixo linhas/embutidas |
| Alinhado | Alinha a grade ao longo do eixo de colunas/blocos |
| conteúdo do local | É uma propriedade abreviada para o conteúdo alinhado e o conteúdo justificado. |
| colunas de grade-auto | Ele determina o tamanho padrão das colunas. |
| Grid-Auto-Rows | Ele define o tamanho padrão das linhas. |
| Grid-Auto-Flow | Determina como os itens de colocação automática são adicionados na grade CSS. |
| grade | É uma propriedade abreviada para várias propriedades da grade (i.e. Relas de plataforma de grade, colunas de templos de grade, areás de grade-templos, linhas-auto-arado, colunas de grade-AUTO e o-flow da grade)). |
Como usar propriedades de contêiner de grade no CSS
Agora, praticamente implementaremos algumas das propriedades acima descritas para uma compreensão profunda.
As colunas da grade-template e as propriedades das linhas de plataforma de grade
Essas propriedades podem levar vários valores separados por espaço, como auto, porcentagem, etc.
Vamos modificar um pouco o exemplo1 um pouco; No exemplo abaixo, todo o código permanecerá o mesmo, exceto a propriedade Grid-Template-Columns.
Exemplo 2
Neste exemplo, adicionaremos uma propriedade Grid-Template-Columns para especificar o tamanho das colunas de nossa escolha:
colunas de grade-template: 1fr automático automático;Do trecho acima, podemos observar que a largura da primeira coluna é "1FR" e a largura das duas colunas restantes é "auto".
Portanto, a largura da primeira coluna será diferente das duas colunas restantes:
Da mesma forma, podemos usar o ROAS DE TEMPLAÇÃO DE GRIDA propriedade para especificar o tamanho das linhas.
A propriedade Align-Content
Para alinhar a grade ao longo do eixo vertical/bloco ou colunas, podemos usar a propriedade Align-Content, e pode levar valores diferentes para realizar diferentes funcionalidades, como "Center", "Start", "End", "Space-Munlyly", etc.
Exemplo 3
Neste exemplo, utilizaremos a propriedade Align-Content e definiremos seu valor como "fim" para definir/alinhar as linhas no final do contêiner. O trecho de código abaixo mostra o código da classe de contêineres enquanto a classe de itens e o código HTML permanecerão os mesmos dos exemplos anteriores:
.classe de contêinerExibição: grade;
colunas de grade-template: automático automático;
Altura: 300px;
Alinhado: Fim;
Background-Color: verde;
preenchimento: 10px;
A propriedade Align-Content causará o seguinte impacto quando seu valor for definido como "fim":
A saída autentica o funcionamento da propriedade Align-Content.
Da mesma forma, podemos implementar o restante das propriedades do contêiner de grade para aproveitar as diferentes funcionalidades, dependendo de nosso desejo e necessidades.
Conclusão
Um recipiente de grade é uma caixa/recipiente que contém itens de grade e pode colocar esses itens nas linhas e colunas. Para criar um contêiner de grade, precisamos utilizar a propriedade Display e definir seu valor como grade ou grade embutida. Além disso, uma ampla gama de propriedades da grade está disponível no CSS para projetar as páginas da web, como itens de justificação-itens, itens alinhados, conteúdo justificado, conteúdo alinhado, grade-flow, grade e assim por diante. Este artigo explicou vários aspectos das propriedades do contêiner de grade e as implementou praticamente.