Propriedades da coluna no CSS | Explicado

Muitas vezes, a estrutura do web design exige que os desenvolvedores da web dividam seu conteúdo em várias colunas. Além disso, apenas dividir o conteúdo não é suficiente, dando a essas colunas um certo estilo também é necessário. O CSS fornece várias propriedades para dividir o conteúdo de um site em várias colunas com eficiência. Essas propriedades são referidas como propriedades da coluna que foram alistadas abaixo.

1. Propriedade da contagem de colunas
2. propriedade de preenchimento de coluna
3. Propriedade de Gap de colunas
4. Propriedade da regra da coluna
5. Propriedade da cor-regra da coluna
6. Propriedade do estilo de regra da coluna
7. Propriedade de largura da regra da coluna
8. Propriedade da coluna
9. Propriedade de largura da coluna
10. Propriedade de colunas

Vamos aprender em detalhes.

Propriedade da contagem de colunas

Para o objetivo de dividir o conteúdo que um elemento contém no número de colunas especificadas, esta propriedade é usada.

Sintaxe

Contagem de colunas: Auto | número | inicial | herdar;

Parâmetros explicados

auto: Este é um valor padrão que avalia o número de colunas com base em outras propriedades, como largura de coluna.

número: Este valor divide o conteúdo no número fornecido de colunas.

Exemplo

Suponha que você queira dividir seu conteúdo em duas colunas e siga o exemplo abaixo.

No exemplo acima, pegamos um longo parágrafo e o colocamos dentro de um recipiente de div e usando a propriedade de contagem de colunas, dividimos o parágrafo em duas colunas.

propriedade de preenchimento de coluna

A propriedade que determina como o conteúdo de um elemento será equilibrado assim que for dividido em colunas, é referido como a propriedade de preenchimento de coluna.

Sintaxe

Coluna de preenchimento: Auto | Balance | inicial | herdar;

Parâmetros explicados

auto: Este valor preenche as colunas de tal maneira que o conteúdo ocupa apenas a quantidade necessária de espaço em cada coluna e isso pode deixar certas colunas vazias.

equilíbrio: Este valor divide o conteúdo em cada coluna igualmente.

Exemplo

O exemplo abaixo demonstra o parâmetro de equilíbrio da propriedade em discussão.

Aqui, definimos a contagem de colunas como 3 e fornecemos alguma altura para o contêiner DIV; Agora, o parâmetro de equilíbrio da propriedade de preenchimento de coluna dividirá igualmente o parágrafo em cada coluna.

Propriedade de Gap de colunas

Para definir a lacuna entre cada coluna, a propriedade de gap de coluna é usada.

Sintaxe

coluna Gap: Normal | comprimento | inicial | herdar;

Parâmetros explicados

normal: Este é um valor padrão que declara uma lacuna normal entre as colunas.

comprimento: Este valor especifica a lacuna entre as colunas na forma de comprimento.

Exemplo

Considere um exemplo para entender como funciona a propriedade de lacunas de colunas.

No exemplo acima, estamos usando o parâmetro de comprimento da propriedade de gap de coluna e o definimos para 30%.

Propriedade da cor-regra da coluna

Para fornecer alguma cor à regra das colunas, esta propriedade é usada.

Sintaxe

coluna-regra-cor: cor | inicial | herdar;

Parâmetros explicados

cor: Este valor indica a cor da regra.

Exemplo

Suponha que você queira dar a regra uma cor azul com um estilo sólido.

O exemplo acima afirma que o parágrafo deve ser dividido em três colunas com uma regra com uma cor azul e um estilo sólido. Use a propriedade de cor-regra da coluna junto com a propriedade em estilo de regra da coluna para ver seu efeito.

Propriedade do estilo de regra da coluna

Como o nome sugere, a propriedade em estilo de regra da coluna fornece algum estilo à regra presente entre diferentes colunas.

Sintaxe

estilo de regra da coluna: Nenhum | pontilhado | oculto | tracejado | sólido | duplo | ranhura | Inserção | início | cume | inicial | herdar;

Parâmetros explicados

nenhum: Este é um valor padrão que não especifica nenhum estilo.

pontilhado: Este valor especifica um estilo pontilhado.

escondido: Afirma um estilo oculto.

tracejadas: Especifica um estilo de regra tracejado.

sólido: Descreve um estilo sólido.

dobro: Afirma um estilo de dupla regra.

sulco: Especifica um estilo de regra de ranhura 3D.

inserir: Afirma um estilo 3D inserido.

início: Especifica um estilo de regra do início 3D.

cume: Afirma uma regra de estilo ridículo em 3D.

Exemplo

Vamos dar ao regra um estilo tracejado.

O exemplo acima demonstra o estilo tracejado da regra. Você pode usar outros valores da propriedade em estilo de regra de coluna de acordo com o seu desejo.

Propriedade de largura da regra da coluna

Esta propriedade fornece alguma largura para a regra entre várias colunas.

Sintaxe

Coluna-regra de largura: comprimento | médio | Thin | espesso | inicial | herdar;

Parâmetros explicados

comprimento: Este valor especifica a largura da regra em números.

médio: Este é um valor padrão que define a largura da regra para o meio.

afinar: Define uma fina largura da regra.

espesso: Define uma largura espessa da regra.

Exemplo

O exemplo abaixo mostra como funciona a propriedade de largura da regra da coluna.

Definimos a largura da regra para 5px com um estilo sólido no código acima. Para ver o efeito da propriedade de largura de regra da coluna, use-a com a propriedade em estilo de regra da coluna.

Propriedade da regra da coluna

Com o objetivo de fornecer alguma largura, estilo e cor para a regra entre várias colunas, a propriedade de regra de colunas é usada. Esta é uma propriedade abreviada para as seguintes propriedades.

1. coluna-regra-color

2. largura da regra da coluna

3. estilo de regra da coluna

Sintaxe

Coluna-regra: coluna-cor-cor | lar-regra da coluna | estilo de regra da coluna | inicial | herdar;

Parâmetros explicados

colun-re-rule-color: Este parâmetro especifica a cor da regra.

largura da regra da coluna: Este valor especifica a largura da regra.

estilo de regra de coluna: Este valor especifica o estilo da regra.

Exemplo

Consulte o exemplo abaixo para entender a propriedade em discussão.

No exemplo acima, definimos que a largura da regra deve ser 5px com um estilo pontilhado e uma cor rosa.

Propriedade da coluna

A propriedade que descreve o número de colunas em torno do qual um elemento deve abranger é chamado de propriedade da coluna.

Sintaxe

coluna-span: Nenhum | tudo | inicial | herdar;

Parâmetros explicados

nenhum: Este é um valor padrão que especifica que o elemento se abrange em uma única coluna.

todos: Este valor afirmou que o elemento se abrange em cada coluna.

Exemplo

Vamos ver como funciona o valor nenhum da propriedade da coluna.

Para demonstrar o conceito de propriedade da coluna, primeiro colocamos um cabeçalho dentro do contêiner Div, então defina a propriedade da coluna do cabeçalho Nenhum, portanto, o cabeçalho é ajustado dentro de uma das colunas. No entanto, o parâmetro All coloca o cabeçalho acima das colunas como esta.

O cabeçalho foi separado das colunas usando o parâmetro All.

Propriedade de largura da coluna

Como o nome sugere, a propriedade de largura da coluna fornece largura da coluna.

Sintaxe

largura da coluna: Auto | comprimento | inicial | herdar;

Parâmetros explicados

auto: Este é um valor padrão que especifica que a largura da coluna será avaliada pelo navegador da web.

comprimento: Este valor define a largura da coluna em números.

Exemplo

Suponha que você queira dar às colunas alguma largura de sua própria escolha e use o parâmetro de comprimento.

Aqui definimos a largura da coluna para 100px.

Propriedade de colunas

Esta é uma propriedade abreviada para a contagem de colunas e propriedades de largura de coluna.

Sintaxe

Colunas: Auto | contagem de colunas | largura da coluna | inicial | herdar;

Parâmetros explicados

auto: Este é um valor padrão que fornece a contagem e a largura das colunas

contagem de colunas: Este valor indica o número máximo de colunas

largura da coluna: Este valor descreve a largura mínima das colunas.

Exemplo

Considere o exemplo para entender a propriedade das colunas.

Definimos a contagem de colunas para 2 com uma largura de 100px.

Conclusão

Dividindo o conteúdo que aparece em um site em colunas e dando a essas colunas um certo estilo pode ser executado usando várias propriedades CSS que se enquadram na categoria de propriedades da coluna. Existem várias propriedades da coluna, como contagem de colunas, regra de coluna, coluna, largura de coluna, coluna-rule-color, etc. Cada uma dessas propriedades serve a um propósito diferente que demonstramos juntamente com a ajuda de exemplos relevantes.