CSS column-span Property

CSS column-span Property


CSS column-span Property
This property specifies the number of columns that should be spanned across by an element.
 
Syntax -
column-span: none|all|initial|inherit;
 
Now we will see the values with their descriptions -
Value
Description
none
Element is spanned across only a single column.
all
Elements span across all columns.
 
Now we will see Example -
Example -
<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 200px;
}
.one {
  column-fill: balance;
  column-count: 3;
  column-rule-width: 5px;
  column-gap: 60px;
  column-rule-style: dashed;
  column-rule-color: rgb(127, 153, 255);
}
.two  {
  column-count: 3;
  column-fill: balance;
  column-gap: 60px;
  column-rule-width: 5px ;
  column-rule-style: double;
  column-rule-color: rgb(255, 127, 191);
}
#first{
  column-span: none;
}
.cond{
  column-span: all;
}
</style>
</head>
<body>
<h1>This is a sample heading</h1>

<div class="one"><h3 id="first">This is column span none</h3>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam minus soluta distinctio reiciendis, asperiores dolore dolorem labore molestias libero officia quia consectetur. Omnis id assumenda excepturi dolorem tempore totam sit aut maiores sequi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, vel. Animi laudantium id sit molestiae aspernatur, minima veritatis molestias reiciendis ea assumenda obcaecati sunt facilis optio vitae officiis exercitationem voluptatem quas laboriosam. Minima?
</div>
<hr>
<br>

<h1>This is a sample heading</h1>

<div class="two">
  <h3 class="cond">Here this is a column span all Lorem, ipsum dolor.lorem3 </h3>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum, voluptatibus perferendis? Eius modi libero placeat doloribus a dolor eveniet ratione cumque laboriosam sequi sed officiis omnis facilis minima earum temporibus atque tempora ipsum, minus est saepe hic animi! Placeat, non commodi tempora laudantium nesciunt labore minima! Quo quia placeat dolore mollitia beatae eum repellendus magnam nam totam aliquam, blanditiis assumenda vitae, tempore, delectus nesciunt ducimus tempora.</div>

</body>
</html>

 
Output -