Curso IT Fundamentos CSS 030_Diseño multicolumna Columns

Diseño multicolumna Columns

Columns (Columnas) es una propiedad utilizada para crear diseños multicolumna en la maquetación de texto. Al establecer el número de columnas y el ancho de columna del contenedor, se logra que el contenido de texto fluya automáticamente entre varias columnas. Columns (Columnas) no es adecuado para todos los tipos de contenido, se utiliza principalmente para diseños multicolumna de contenido de texto, no para el diseño de toda la página.

• column-count： Especifica el número de columnas.
• column-width： Especifica el ancho de cada columna.
• column-gap： Especifica el espacio entre columnas.
• column-rule： Establece la regla (línea divisoria) entre columnas.

Ejemplo:

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 es un párrafo 111，Este es un párrafo 111，Este es un párrafo 111。</p>
3
        <p>Este es un párrafo 222，Este es un párrafo 222，Este es un párrafo 222。</p>
4
        <p>Este es un párrafo 333，Este es un párrafo 333，Este es un párrafo 333。</p>
5
    </div>

Efecto: