Articles
Introdução ao CSS
Propriedades CSS relacionadas ao layout de colunas

Propriedades CSS relacionadas ao layout de colunas

Este artigo explica as propriedades CSS relacionadas ao layout de colunas.

Você pode aprender como descrever layouts de colunas.

YouTube Video

HTML para Visualização

css-columns.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-columns.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Columns</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Layout Related Properties</h2>
20        </header>
21        <article>
22            <h3>columns</h3>
23            <section style="width: 100%; height: 350px;">
24                <h4>Columns Example</h4>
25                <header><h4>columns: 100px 3; column-gap: 20px; column-rule: 2px solid #333;</h4></header>
26                <section class="sample-view">
27                    <section class="columns-container">
28                        <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
29                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
30                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
31                        <p>Pellentesque malesuada diam eu sem finibus scelerisque.</p>
32                        <p>Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
33                        <p>Morbi in nibh in lorem vestibulum sollicitudin.</p>
34                    </section>
35                </section>
36            </section>
37        </article>
38        <article>
39            <h3>order</h3>
40            <section style="height: 300px;">
41                <header><h4>column-width: 250px</h4></header>
42                <section class="sample-view">
43                    <div class="container">
44                        <div class="item item-1">Item 1</div>
45                        <div class="item item-2">Item 2</div>
46                        <div class="item item-3">Item 3</div>
47                    </div>
48                </section>
49            </section>
50        </article>
51    </main>
52</body>
53</html>

Layout de Colunas

colunas 

1.columns-container {
2    columns: 100px 3;
3    column-gap: 20px;
4    column-rule: 2px solid #333;
5}
6
7h5 {
8  column-span: all;
9}

A propriedade CSS columns oferece uma maneira conveniente de exibir conteúdo dividido em várias colunas. Com uma única declaração, você pode definir facilmente a largura e o número de colunas, tornando-a apropriada para design responsivo. É particularmente eficaz quando é necessário um layout onde o texto é exibido verticalmente longo e organizado em várias colunas, como em jornais ou revistas.

  • Neste exemplo, o conteúdo é dividido em 3 colunas com um espaçamento de 20px e uma linha de 2px entre as colunas. Além disso, o elemento h5 se estende por várias colunas.

columns é uma abreviação para as propriedades column-width e column-count.

Sintaxe da propriedade columns 

1columns: <column-width> <column-count>;

columns segue este formato.

  • <column-width>: Especifica a largura de cada coluna. Você pode usar auto ou qualquer unidade de comprimento (por exemplo, px, em, %, etc.) como valor.
  • <column-count>: Especifica o número de colunas. Expresso como um valor numérico.
Propriedade column-width 
1.container {
2  column-width: 250px;
3}

column-width é uma propriedade que especifica a largura mínima de cada coluna. Quando usada com column-count, torna-se possível o posicionamento e o ajuste automáticos das colunas. O navegador leva em conta a largura do contêiner e calcula automaticamente o número necessário de colunas.

  • Neste exemplo, a largura por coluna é de 250px, e o número ideal de colunas é calculado com base na largura do contêiner.
Propriedade column-count 
1.container {
2  column-count: 3;
3}

column-count é uma propriedade que define explicitamente em quantas colunas o elemento especificado será dividido. Ao contrário de column-width, esta propriedade fixa o número de colunas.

  • Neste exemplo, o conteúdo dentro do contêiner é dividido em três colunas.
Propriedade column-gap 
1.container {
2  column-gap: 20px;
3}

column-gap é uma propriedade que especifica o espaço (lacuna) entre cada coluna. Há também uma propriedade comum com CSS Grid chamada gap, mas column-gap é útil quando você deseja personalizar apenas as margens entre as colunas.

  • Neste exemplo, há uma margem de 20px entre cada coluna. O valor padrão é 16px.
Propriedade column-rule 
1.container {
2  column-rule: 2px solid #333;
3}

column-rule é uma propriedade para desenhar linhas entre as colunas. Ela possui uma sintaxe semelhante à propriedade border e permite especificar a largura, o estilo e a cor da linha.

  • Neste exemplo, uma linha preta sólida com largura de 2px é exibida entre as colunas. column-rule pode ser dividida nas seguintes três propriedades:.
    • column-rule-width: Especifica a largura da linha.
    • column-rule-style: Especifica o estilo da linha. Por exemplo, há solid, dashed, dotted, etc.
    • column-rule-color: Especifica a cor da linha.
Propriedade column-span 
1h5 {
2  column-span: all;
3}

column-span é uma propriedade que define um elemento específico para se estender por várias colunas. Ela é usada principalmente para elementos como cabeçalhos ou títulos. Existem dois valores possíveis:. - none: O elemento não se estende pelas colunas e se ajusta dentro de uma única coluna. Este é o valor padrão. - all: O elemento é exibido se estendendo por todas as colunas.

  • Neste exemplo, o elemento h5 é exibido se estendendo por várias colunas.
Propriedade column-fill 
1.container {
2  column-fill: balance;
3}

column-fill é uma propriedade que controla como o conteúdo é distribuído entre as colunas. Normalmente, as colunas são preenchidas de forma o mais uniforme possível, mas esta propriedade permite especificar uma disposição diferente. Os valores a seguir estão disponíveis:. - balance: O conteúdo é disposto para preencher as colunas uniformemente. Este é o valor padrão. - auto: As colunas serão preenchidas automaticamente. A última coluna pode ficar mais longa.

  • Essa configuração ajusta o conteúdo para que seja distribuído uniformemente.
Usando com Media Queries 
1.container {
2  columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6  .container {
7    columns: 1;
8  }
9}

A propriedade columns pode ser combinada com media queries para suportar design responsivo. Você pode alterar de forma flexível o número de colunas e larguras das colunas dependendo dos diferentes tamanhos de tela.

  • Neste exemplo, quando a largura da tela for de 600px ou menos, haverá 1 coluna. Para telas mais largas, será dividido em 3 colunas com uma largura de 200px cada.

Resumo

A propriedade CSS columns é uma ferramenta poderosa para implementar facilmente layouts usando várias colunas. É particularmente útil para design responsivo e layouts de texto que priorizam a legibilidade. Ao combinar propriedades relacionadas, você pode personalizar de forma flexível o número e a largura das colunas, os espaçamentos, decorações, etc.

Isso permite a implementação fácil de designs mais sofisticados, portanto, aproveite isso.

ordem 

 1.container {
 2    all:initial;
 3    display: flex;
 4}
 5.item {
 6    padding: 10px;
 7    background-color: lightblue;
 8    margin: 5px;
 9}
10.item-1 {
11    order: 3;
12}
13.item-2 {
14    order: 1;
15}
16.item-3 {
17    order: 2;
18}

A propriedade CSS order é usada para controlar a ordem de exibição dos elementos ao usar layouts Flexbox ou Grid. Normalmente, os elementos são renderizados de acordo com a marcação HTML, mas você pode alterar sua ordem visual usando a propriedade order. Esta propriedade ajuda a projetar interfaces de usuário flexíveis e a construir designs responsivos.

  • Neste exemplo, os itens estão marcados no HTML como Item 1, Item 2, Item 3, mas a ordem de exibição muda para Item 2, Item 3, Item 1 devido à propriedade CSS order.

Fundamentos da Propriedade order

A propriedade order é aplicada a itens dentro de contêineres Flexbox ou Grid. Você define a ordem de colocação atribuindo valores inteiros a cada item. Por padrão, o order de todos os itens é definido como 0. Ao alterar esse valor, você pode especificar a ordem em que os itens serão exibidos.

Sintaxe Básica 
1.item {
2  order: <integer>;
3}
  • Você pode usar qualquer valor inteiro para o valor de order. Podem ser usados valores positivos, negativos ou zero. Quanto menor o valor, mais cedo o elemento é exibido; quanto maior o valor, mais tarde ele é exibido.

Usando Valores Positivos e Negativos

Você também pode atribuir valores negativos à propriedade order. Elementos com valores negativos são exibidos antes da ordem padrão.

1.item-1 {
2    order: -1;
3}
4.item-2 {
5    order: 2;
6}
7.item-3 {
8    order: 1;
9}

Neste exemplo, Item 1 é configurado como order: -1, então ele aparece primeiro. Em contraste, Item 3 é configurado como order: 1, e Item 2 como order: 2, então eles aparecem nessa ordem.

order no Design Responsivo

No design responsivo, é possível alterar a ordem dos elementos de acordo com o tamanho da tela. Por exemplo, na visualização móvel, você pode alterar a ordem dos elementos para exibir informações importantes primeiro.

 1.item-1 {
 2    order: 1;
 3}
 4.item-2 {
 5    order: 2;
 6}
 7.item-3 {
 8    order: 3;
 9}
10
11/* Change the order on screens with a width of 800px or less */
12@media (max-width: 800px) {
13    .item-1 {
14        order: 3;
15    }
16    .item-2 {
17        order: 1;
18    }
19    .item-3 {
20        order: 2;
21    }
22}

Neste exemplo, na visualização normal, os itens são exibidos na ordem Item 1, Item 2, Item 3, mas quando a largura da tela é inferior a 600px, Item 2 aparece primeiro, Item 3 em seguida, e Item 1 por último.

Considerações para o uso de order

O uso da propriedade order pode resultar em uma ordem visual diferente da ordem presente na árvore DOM. Isso pode afetar ferramentas de acessibilidade, como leitores de tela. Quando a ordem é alterada, a navegação por teclado e outras tecnologias assistivas podem não funcionar como o esperado. Portanto, é necessário considerar cuidadosamente o impacto sobre a experiência do usuário ao usar order.

Conclusão

A propriedade CSS order é uma ferramenta poderosa que permite controlar facilmente a ordem de exibição dos elementos em layouts Flexbox ou Grid. Ao usar valores positivos ou negativos, você pode mudar a ordem dos elementos de forma flexível, o que é particularmente útil no design responsivo. No entanto, é preciso prestar atenção à acessibilidade e à divergência entre a ordem visual e a estrutura HTML. Se essas questões forem devidamente consideradas, a propriedade order pode ser útil para criar layouts mais dinâmicos e flexíveis.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Propriedades do CSS relacionadas ao layout de grades