CSS3 Múltiples columnas

CSS3 puede diseñar el contenido de texto en un diseño de varias columnas como un periódico, como en el siguiente ejemplo:

Tutorial para novatos: ¡lo que aprendes no es solo tecnología, sino también sueños! Ejemplo (www.example.com) ofrece los tutoriales de tecnología de programación más completos, presentando conocimientos básicos de varios lenguajes de programación como HTML, CSS, Javascript, Python, Java, Ruby, C, PHP, MySQL, etc. Al mismo tiempo, este sitio también ofrece una gran cantidad de ejemplos en línea, a través de los cuales puede programar mejor.

Soporte del navegador

Los números en la tabla indican el número de versión del primer navegador que admite el método.

El -webkit- o -moz- que sigue al número es el prefijo del navegador especificado.

Propiedad
column-count 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-gap 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule-color 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-rule-style 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-rule-width 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-width 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1

Propiedades de múltiples columnas de CSS3

En este capítulo aprenderemos las siguientes propiedades de columnas múltiples de CSS3:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

CSS3 Crear múltiples columnas

column-countLa propiedad especifica el número de columnas en las que se debe dividir.

El siguiente ejemplo divide el texto en el elemento <div> en 3 columnas:

Ejemplo

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

Pruébalo »

El espacio entre columnas en CSS3 Múltiples columnas

column-gapLa propiedad especifica el espacio entre columnas.

El siguiente ejemplo especifica que el espacio entre columnas es de 40 píxeles:

Ejemplo

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

Pruébalo »

Borde de columna CSS3

column-rule-styleLa propiedad especifica el estilo del borde entre columnas:

Ejemplo

div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}

Pruébalo »

column-rule-widthLa propiedad especifica el grosor del borde entre columnas:

Ejemplo

div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}

Pruébalo »

column-rule-colorLa propiedad especifica el color del borde entre columnas:

Ejemplo

div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}

Pruébalo »

column-ruleLa propiedad es una abreviatura de todas las propiedades column-rule-*.

El siguiente ejemplo establece el grosor, el estilo y el color del borde entre columnas:

Ejemplo

div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}

Pruébalo »

Especificar cuántas columnas abarca un elemento

El siguiente ejemplo especifica que el elemento <h2> abarca todas las columnas:

Ejemplo

h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}

Pruébalo »

Especificar el ancho de las columnas

column-widthLa propiedad especifica el ancho de las columnas.

Ejemplo

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}

Pruébalo »

Propiedades de múltiples columnas de CSS3

La siguiente tabla enumera todas las propiedades de columnas múltiples de CSS3:

Propiedad Descripción
column-count Especifica el número de columnas en las que se debe dividir el elemento.
column-fill Especifica cómo rellenar las columnas.
column-gap Especifica el espacio entre columnas.
column-rule Abreviatura de todas las propiedades column-rule-*.
column-rule-color Especifica el color del borde entre las columnas.
column-rule-style Especifica el estilo del borde entre las columnas.
column-rule-width Especifica el grosor del borde entre las columnas.
column-span Especifica cuántas columnas abarcará un elemento.
column-width Especifica el ancho de las columnas.
columns Propiedad abreviada de column-width y column-count.
Otras extensiones