La propiedad column-span CSS hace posible que un elemento se extienda sobre todas las columnas cuando su valor se establece a all.

/* Keyword values */
column-span: none;
column-span: all;

/* Global values */
column-span: inherit;
column-span: initial;
column-span: unset;

A un elemento que se extiende más de una columna se le llama elemento extendido (spanning element).

Sintaxis

La propiedad column-span se especifica como una de las palabras clave listadas a continuación.

Valores

none
El elemento no se extiende en sobre varias columnas.
all
El elemento se extiende sobre todas las columnas. El contenido en el flujo normal que aparece antes del elemento se equilibra automáticamente en todas las columnas antes de que aparezca el elemento. El elemento establece un nuevo contexto de formato de bloque..

Sintaxis formal

none | all

Ejemplo

En este ejemplo, la cabecera se expande sobre todas las columnas del artículo.

HTML

<article>
  <h2>My Very Special Columns</h2>
  <p>This is a bunch of text split into three columns
     using the CSS `columns` property. The text
     is equally distributed over the columns.</p>
</article>

CSS

article {
  columns: 3;
}

h2 {
  column-span: all;
}

Resultado

Especificaciones

Especificación Estado Comentario
CSS Multi-column Layout Module
La definición de 'column-span' en esta especificación.
Working Draft Definición inicial.
Valor inicialnone
Applies toin-flow block-level elements
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animation typediscrete
Canonical orderper grammar

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
column-spanChrome Soporte completo 50
Soporte completo 50
Soporte completo 6
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Edge Soporte completo 12
Soporte completo 12
Soporte completo 12
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Firefox Soporte completo 65
Deshabilitado
Soporte completo 65
Deshabilitado
Deshabilitado From version 65: this feature is behind the layout.css.column-span.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Soporte completo 10Opera Soporte completo 11.1
Soporte completo 11.1
Soporte completo 15
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Safari Soporte completo 9
Soporte completo 9
Soporte completo 5.1
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
WebView Android Soporte completo 50
Soporte completo 50
Soporte completo ≤37
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Chrome Android Soporte completo 50
Soporte completo 50
Soporte completo 18
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Firefox Android Soporte completo 65
Deshabilitado
Soporte completo 65
Deshabilitado
Deshabilitado From version 65: this feature is behind the layout.css.column-span.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 11.1
Soporte completo 11.1
Soporte completo 14
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Safari iOS Soporte completo 9
Soporte completo 9
Soporte completo 5
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Samsung Internet Android Soporte completo 5.0
Soporte completo 5.0
Soporte completo 1.0
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-

Leyenda

Soporte completo  
Soporte completo
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

Etiquetas y colaboradores del documento

Colaboradores en esta página: AlePerez92
Última actualización por: AlePerez92,