Diseño de varias columnas
El diseño de varias columnas de CSS permite una fácil definición de varias columnas de texto, como en los periódicos:
Propiedades de varias columnas
En este capítulo aprenderás acerca de las siguientes propiedades multi columnas:
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
Compatibilidad con el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | Chrome | Edge | Mozilla | Safari | Opera |
column-count | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-gap | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-rule | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-rule-color | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-rule-style | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-rule-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-span | 50.0 | 10.0 | 71.0 | 9.0 | 37.0 |
column-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
Crea múltiples columnas
La propiedad column-count especifica el número de columnas en las que se debe dividir un elemento.
El siguiente ejemplo dividirá el texto en el elemento <div> en 3 columnas:
Ejemplo:
div {
column-count: 3;
}
Especifica la brecha entre columnas
La propiedad column-gap especifica el espacio entre las columnas.
El siguiente ejemplo especifica un espacio de 40 píxeles entre las columnas:
Ejemplo:
div {
column-gap: 40px;
}
Reglas de columna
La propiedad column-rule-style especifica el estilo de la regla entre columnas:
Ejemplo:
div {
column-rule-style: solid;
}
La propiedad column-rule-width especifica el ancho de la regla entre columnas:
Ejemplo:
div {
column-rule-width: 1px;
}
La propiedad column-rule-color especifica el color de la regla entre columnas:
Ejemplo:
div {
column-rule-color: lightblue;
}
La propiedad column-rule es una propiedad abreviada para configurar todas las propiedades anteriores.
El siguiente ejemplo establece el ancho, el estilo y el color de la regla entre columnas:
Ejemplo:
div {
column-rule: 1px solid lightblue;
}
Especificar cuántas columnas debe abarcar un elemento
La propiedad column-span especifica cuántas columnas debe abarcar un elemento
El siguiente ejemplo especifica que el elemento <h2> debe abarcar todas las columnas:
Ejemplo:
h2 {
column-span: all;
}
Especifique el ancho de la columna
La propiedad column-width especifica un ancho óptimo sugerido para las columnas.
El siguiente ejemplo especifica que el ancho óptimo sugerido para las columnas debe ser 100px:
Ejemplo:
div {
column-width: 100px;
}
Todas las propiedades
La siguiente tabla enumera todas las propiedades de varias columnas:
| Propiedad | Descripción |
column-count | Especifica el número de columnas en las que se debe dividir un elemento. |
column-fill | Especifica cómo llenar las columnas. |
column-gap | Especifica el espacio entre las columnas. |
column-rule | Una propiedad abreviada para configurar todas las propiedades column-rule. |
column-rule-color | Especifica el color de la regla entre columnas. |
column-rule-style | Especifica el estilo de la regla entre columnas. |
column-rule-width | Especifica el ancho de la regla entre columnas. |
column-span | Especifica cuántas columnas debe abarcar un elemento. |
column-width | Especifica un ancho óptimo sugerido para las columnas. |
columns | Una propiedad abreviada para establecer el ancho de columna y el recuento de columnas. |
Traducido con 💚 desde W3Schools.com