CSS | Propiedad column-span

Posted on by Rudeus Greyrat

La propiedad column-span de CSS establece el número de columnas que puede abarcar un elemento. Su valor puede ser ninguno | todo | inicial | heredar 
Sintaxis: 
 

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

Valor predeterminado: Ninguno

Valores de propiedad: 
 

  • all : Permite abarcar en todas las columnas por igual.
    Sintaxis: 
     
 column-span: all;
  • Ejemplo: 
     

html

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | column-span Property
    </title>
    <style>
        .paragraph {
            column-count: 3;
        }
          
        h2 {
            column-span: all;
        }
    </style>
</head>
  
<body>
    <div class="paragraph ">
        <h2> Here we used col-span:all; 
          It had done span across three columns
        </h2>
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
  </div>
</body>
</html>
  • Producción: 
     

  • ninguno: este valor elimina el elemento de expansión y lo establece en ninguno. 
    Sintaxis: 
     
 column-span: none;
  • Ejemplo: 
     

html

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | column-span Property
    </title>
    <style>
        .paragraph {
            column-count: 3;
        }
          
        h2 {
            column-span: none;
        }
    </style>
</head>
  
<body>
    <div class="paragraph ">
        <h2> Here we used col-span:none;
          It had done span across three columns
        </h2>
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
  </div>
</body>
</html>
  • Producción: 
     

  • initial: este valor hace que esta propiedad se establezca en su valor predeterminado.
    Sintaxis: 
     
 column-span: initial;
  • Ejemplo: 
     

html

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | column-span Property
    </title>
    <style>
        .paragraph {
            column-count: 3;
        }
          
        h2 {
            column-span: initial;
        }
    </style>
</head>
  
    <div class="paragraph ">
        <h2> Here we used col-span:initial;
          It had done span across three columns
        </h2>
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
  </div>
</body>
</html>
  • Producción: 
     

  • heredar: el elemento asociado toma el valor evaluado de la propiedad de extensión de columna especificada de su elemento padre, es decir, tomará la propiedad heredada del elemento padre. Esto no es compatible con la propiedad column-span de CSS.
    Sintaxis: 
     
 column-span: inherit;
  • Ejemplo: 
     

html

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | column-span Property
    </title>
    <style>
        .paragraph {
            column-count: 3;
        }
          
        h2 {
            column-span: all;
        }
    </style>
</head>
  
<body>
    <div class="paragraph ">
        <h1>Here colspan: all;
          Inheritance is done in next paragraph 
        </h1> 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
    </div>
    <br>
    <br>
  
    <div class="paragraph ">
        <h2>Here  we used colspan: inherit.;</h2> 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
    </div>
  
</body>
  
</html>
  • Producción: 
     

  • Navegadores compatibles: El navegador compatible con CSS | Las propiedades column-span se enumeran a continuación: 
    • Google Chrome 50.0, 4.0 -webkit-
    • Internet Explorer 10.0
    • Opera 37.0, 15.0 -webkit-
    • Safari 9.0, 3.1 -webkit-

Publicación traducida automáticamente

Artículo escrito por MeghaKakkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *