Curso IT Fundamentos CSS 030_Layout de múltiplas colunas Columns

Layout de múltiplas colunas Columns

Columns(colunas) é uma propriedade usada para criar múltiplas colunas em um layout de texto. Ao definir o número de colunas e a largura das colunas do contêiner, o conteúdo do texto flui automaticamente entre as colunas. Columns(colunas) não se aplica a todos os tipos de conteúdo, é principalmente usada para processar layouts de múltiplas colunas de conteúdo de texto, e não para o layout de toda a página.

• column-count： Especifica o número de colunas.
• column-width： Especifica a largura de cada coluna.
• column-gap： Especifica o espaço entre as colunas.
• column-rule： Define a linha de regra (linha divisória) entre as colunas.

Exemplo:

1
.example{
2
    column-count: 3;
3
    /* column-width: 200px; */
4
    column-gap: 20px;
5
    column-rule: 1px solid red;
6
}
7
p {
8
    margin: 0 0 10px;
9
}

1
    <div class="example">
2
        <p>Este é um parágrafo 111, Este é um parágrafo 111, Este é um parágrafo 111.</p>
3
        <p>Este é um parágrafo 222, Este é um parágrafo 222, Este é um parágrafo 222.</p>
4
        <p>Este é um parágrafo 333, Este é um parágrafo 333, Este é um parágrafo 333.</p>
5
    </div>

Efeito: