CSS column-span Property

CSS column-span property specifies whether an element in a multi-column layout should span across all the columns or not.

It accepts two values, none and all. none is the default value. Which indicates that the element will span across only one column in the layout.

The column-span: all; specifies that the element will span across all columns in the layout. See the example below:

Example:

.p1{
  column-span: none;
}
.p2{
  column-span: all;
}

Note: It is to be remembered that the column-span property only works with the block-level elements. An element is called a block-level element if it has display: block;.


CSS Syntax

The column-span property has the following syntax:

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

Property Values

The column-span property accepts the following values:

noneThe element spans across only one column in the multi-column layout. This is the default value.
allThe element span across all columns in the multi-column layout.
initialSets the column-span property to its default value(none).
inheritInherits the column-span property from the parent element.

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.columnSpan = “all”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment