Propiedad column-span de CSS

La propiedad column-span define si un elemento se extiende a través de una columna o de todas las columnas. Es una de las propiedades de CSS3. Tiene cuatro valores: none, all, initial e inherit. none es el valor predeterminado, que mantiene el elemento dentro de una sola columna. El valor all hace que el elemento se extienda a través de todas las columnas. Esta propiedad es útil para elementos anchos, como imágenes o encabezados, lo que te permite elegir si se extienden por todas las columnas o permanecen en una sola.

INFO

Un elemento solo puede extenderse a través de columnas si es un elemento de nivel de bloque.

Valor inicial	none
Se aplica a	elementos de nivel de bloque en flujo
Heredable	No.
Animable	No.
Versión	CSS Multi-column Layout Module Level 1
Sintaxis DOM	`object.style.columnSpan = "all";` (Nota: las propiedades CSS usan camelCase en JavaScript)

Sintaxis

Sintaxis de la propiedad column-span de CSS

css

column-span: none | all | initial | inherit;

Ejemplo: valor none

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
      }
      h2 {
        column-span: none;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Lorem Ipsum is simply dummy text</h2> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Resultado

Propiedad column-span de CSS

En el siguiente ejemplo, el encabezado se extiende a través de las cuatro columnas.

Ejemplo: valor all

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
      }
      h2 {
        column-span: all;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Lorem Ipsum is simply dummy text</h2>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Ejemplo: valor initial

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
      }
      h2 {
        column-span: initial;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Lorem Ipsum is simply dummy text</h2> 
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Ejemplo: valor inherit

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
      }
      h2 {
        column-span: inherit;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Lorem Ipsum is simply dummy text</h2>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción	Probar
none	Este es el valor predeterminado. El elemento no se extiende a través de todas las columnas; permanece en una sola columna.	Probar »
all	El elemento se extiende a través de todas las columnas.	Probar »
initial	Establece la propiedad en su valor predeterminado.	Probar »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Cuál es la función de la propiedad 'column-span' en CSS?

Permite que un elemento se extienda a través de todas las columnas en un diseño de varias columnasPermite que un elemento se extienda a través de ciertas columnas especificadas en un diseño de varias columnasEstablece el ancho de cada columna en un diseño de varias columnasPuede extender un elemento a través de todas las filas en un diseño de varias filasAyuda a establecer el relleno de las columnas en un diseño de varias columnas

Propiedad column-span de CSS ​

Sintaxis ​

Ejemplo: valor none ​

Resultado ​

Ejemplo: valor all ​

Ejemplo: valor initial ​

Ejemplo: valor inherit ​

Valores ​

Práctica ​

Propiedad column-span de CSS

Sintaxis

Ejemplo: valor none

Resultado

Ejemplo: valor all

Ejemplo: valor initial

Ejemplo: valor inherit

Valores

Práctica