CSS | column-span Property - GeeksforGeeks

06 Sep, 2021
The column-span property of CSS sets the number of columns an element can span across. Its value can be none | all | initial | inherit Syntax:  
column-span: none|all|initial|inherit;
Default Value: None
Property Values:  
all: It allows to span in all the columns equally.Syntax:  
 column-span: all;
Example:  
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>
Output:  
none: This value kills the spanning element and sets it to none. Syntax:  
 column-span: none;
Example:  
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>
Output:  
initial: This value makes this property set to its default value.Syntax:  
 column-span: initial;
Example:  
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>
Output:  
inherit: The associated element takes the evaluated value of its parent element’s specified column-span property i.e. it will take the inherited property of the parent element. This is not supported by the column-span property of CSS.Syntax:  
 column-span: inherit;
Example:  
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>
Output:  
Supported Browsers: The browser supported by CSS | column-span Property are listed below: Google Chrome 50.0, 4.0 -webkit-Internet Explorer 10.0Opera 37.0, 15.0 -webkit-Safari 9.0, 3.1 -webkit-
Google Chrome 50.0, 4.0 -webkit-
Internet Explorer 10.0
Opera 37.0, 15.0 -webkit-
Safari 9.0, 3.1 -webkit-
sweetyty
sagartomar9927
ManasChhabra2
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?