Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS column-span Property

Posted in CSS Tutorial
Updated on Oct 02, 2024
By Mari Selvan
👁️ 19 - Views
⏳ 4 mins
💬 1 Comment
CSS column-span Property

Photo Credit to CodeToFun

🙋 Introduction

The column-span property in CSS is used to specify how many columns an element should span across in a multi-column layout.

This property can be particularly useful when you want a specific element to break out of the column structure and span across all columns, creating a visually distinct section within the layout.

💡 Syntax

The syntax for the column-span property is simple. It can take one of two values: none or all.

Syntax
Copied
Copy To Clipboard
element {
  column-span: value;
}

🎛️ Default Value

The default value of the column-span property is none, which means the element will adhere to the column structure and will not span across columns.

🏠 Property Values

ValueDescription
noneThe element does not span across columns (default).
allThe element spans across all columns.

📄 Example

In this example, we'll make a heading span across all columns in a multi-column layout.

index.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS column-span Example</title>
  <style>
    .container {
      column-count: 3;
      column-gap: 20px;
    }
    .spanning-element {
      column-span: all;
      background-color: lightblue;
      padding: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="spanning-element">
      This heading spans across all columns
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, neque id placerat hendrerit, nulla nunc sollicitudin metus, et varius lorem tortor et libero. Maecenas ac convallis justo.</p>
    <p>Proin id consequat nunc. Integer tincidunt erat et massa commodo, a feugiat magna ullamcorper. Sed accumsan risus a dui tristique, at viverra sapien facilisis.</p>
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer in libero vel risus dignissim malesuada.</p>
    <p>Ut vehicula, est id euismod hendrerit, magna dui varius dui, et suscipit purus est sed nunc. Nulla facilisi. Integer in lorem vel quam vehicula hendrerit.</p>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The column-span property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The column-span property is a useful tool for creating unique and visually appealing layouts in a multi-column setting.

By allowing specific elements to span across all columns, you can create standout sections that draw attention and break up the monotony of the column structure. Experiment with this property to enhance the design and readability of your multi-column layouts.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy