Hi developer! In this article, we've explained everything you need to know about the CSS column property. After reading this article carefully, we are sure that you will master the CSS column property.
Let's dive in!
Column-count property
The column-count property divides an HTML element into multiple columns.
Here are the values for the column-count property:
number: Specifies the number of columns an element should be divided into.
auto: This is the default value. It lets the browser determine the number of columns based on other properties, like column width.
Syntax:
column-count: number | auto;<head>
<style>
.container {
background-color: thistle;
columns: 4;
font-size: 25px;
}
</style>
</head>
<body>
<h1>The column-count Property</h1>
<div class="container">
<p>Lorem ipsum dolor sit ...(200 words)... fugit dolorem. </p>
</div>
</body>
Column-fill property
The column-fill property determines how content fills columns.
Here are the values for the column-fill property:
balance: This is the default value. It attempts to balance the content evenly across columns.
auto: Specifies that the browser should fill columns sequentially, regardless of the balance of content.
Syntax:
column-fill: balance | auto;
<head>
<style>
div {
background-color: thistle;
column-count: 3;
font-size: 25px;
height: 200px;
}
.container-1 {
column-fill: auto;
}
.container-2 {
column-fill: balance;
}
</style>
</head>
<body>
<h1>The column-fill Property auto value</h1>
<div class="container-1">
Lorem ipsum dolor ...(100 Words)... aliquam.
</div>
<h1>The column-fill Property balance value </h1>
<div class="container-2">
Lorem ipsum dolor ...(100 Words)... aliquam.
</div>
</body>
Column-gap property
The column-gap property is used to set the gap between columns.
Here are the values for the column-gap property:
length: You can specify the length of the gap between columns (px, %, and more).
normal: This is the default value. Specifies the common spacing between columns.
Syntax:
column-gap: length | normal;
<head>
<style>
.container {
column-count: 4;
column-gap: 100px;
font-size: 25px;
}
</style>
</head>
<body>
<h1>The column-gap Property </h1>
<div class="container">
Lorem ipsum dolor ...(100 Words)... aliquam.
</div>
</body>
Column-rule-color property
The column-rule-color property is used to specify the color of the rule in the middle of the column.
Syntax:
column-rule-color: color;<head>
<style>
.container {
column-count: 4;
column-rule-color: steelblue;
column-rule-style: solid;
font-size: 25px;
}
</style>
</head>
<body>
<h1>The column-rule-color Property </h1>
<div class="container">
Lorem ipsum dolor ...(100 Words)... aliquam.
</div>
</body>
Column-rule-style property
The column-rule-style property sets the style of the rule between columns.
Here are the values for the column-rule-style property:
none: No style is applied (default).
hidden: The rule is hidden.
dotted: The rule is a series of dots.
solid: The rule is a solid line.
double: The rule is a double line.
groove: The rule is a 3D grooved line.
ridge: The rule is a 3D ridged line.
inset: The rule is a 3D inset line.
outset: The rule is a 3D outset line.
Syntax:
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
<head>
<style>
body {
width: 50%;
}
.container {
column-count: 3;
column-rule-color: steelblue;
column-rule-style: dotted;
column-rule-width: 10px;
font-size: 25px;
}
.container-2 {
column-count: 3;
column-rule-color: steelblue;
column-rule-style: groove;
column-rule-width: 10px;
font-size: 25px;
}
.container-3 {
column-count: 3;
column-rule-color: steelblue;
column-rule-style: double;
column-rule-width: 10px;
font-size: 25px;
}
</style>
</head>
<body>
<h1>The column-rule-style Property </h1>
<div class="container">
Lorem ipsum dolor ...(40 Words)... nam accusamus natus.
</div>
<h1>The column-rule-style Property </h1>
<div class="container-2">
Lorem ipsum dolor ...(40 Words)... nam accusamus natus.
</div>
<h1>The column-rule-style Property </h1>
<div class="container-3">
Lorem ipsum dolor ...(40 Words)... nam accusamus natus.
</div>
</body>
Column-rule-width property
The column-rule-width property determines the width of the rule between columns.
Here are the values for the column-rule-width property:
length: Sets the width to a specific length (e.g., pixels).
medium: Default value, representing a medium width.
thin: Represents a thin width.
thick: Represents a thick width.
Syntax:
column-rule-width: medium | thin | thick;<head>
<style>
body {
width: 50%;
}
.container {
column-count: 3;
column-rule-color: steelblue;
column-rule-style: solid;
column-rule-width: 10px;
font-size: 25px;
}
.container-2 {
column-count: 3;
column-rule-color: steelblue;
column-rule-style: outset;
column-rule-width: thick;
font-size: 25px;
}
.container-3 {
column-count: 3;
column-rule-color: steelblue;
column-rule-style: inset;
column-rule-width: thin;
font-size: 25px;
}
</style>
</head>
<body>
<h1>The column-rule-width Property </h1>
<div class="container">
Lorem ipsum dolor ...(40 Words)... nam accusamus natus.
</div>
<h1>The column-rule-style Property </h1>
<div class="container-2">
Lorem ipsum dolor ...(40 Words)... nam accusamus natus.
</div>
<h1>The column-rule-style Property </h1>
<div class="container-3">
Lorem ipsum dolor ...(40 Words)... nam accusamus natus.
</div>
</body>
Column-rule property
The column-rule property is a shorthand for specifying column width, style, and color.
column-rule-width: Sets the width between columns (the default is medium).
column-rule-style: Sets the style of the rule between columns (the default is none).
column-rule-color: Sets the color of the rule between columns (the default is the element's color).
Syntax:
column-rule: column-rule-width column-rule-style column-rule-color;<head>
<style>
body {
width: 50%;
}
.container {
column-count: 4;
column-rule: 10px double thistle;
font-size: 25px;
}
.container-1 {
column-count: 2;
column-rule: 10px double;
color: red;
font-size: 25px;
}
</style>
</head>
<body>
<h1>The column-rule Property </h1>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dicta ad, ut minus molestiae
asperiores
possimus laboriosam! Repudiandae placeat corporis beatae sint nulla tempora quidem provident, veritatis,
explicabo ratione facere minima deleniti voluptatibus aut nobis, nam accusamus natus.
</div>
<h1>The column-rule Property</h1>
<div class="container-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dicta ad, ut minus molestiae
asperiores
possimus laboriosam! Repudiandae placeat corporis beatae.
</div>
</body>
Column-span property
The column-span property determines the number of columns an element spans.
Here are the values for the column-span property:
none: Default value; the element spans one column.
all: The element spans all columns.
Syntax:
column-span: none | all;<head>
<style>
.container {
column-count: 3;
font-size: 25px;
background-color: thistle;
}
.container-2 {
margin-top: 100px;
}
.heading-1 {
column-span: all;
}
.heading-2 {
column-span: none;
}
</style>
</head>
<body>
<div class="container">
<h1 class="heading-1">The column-span Property all value </h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur eaque magnam quidem, possimus
officia
sunt. Culpa, explicabo eveniet. Fugiat, nulla itaque. Beatae nihil consectetur amet rem. Quo quia illo
cumque. Hic asperiores, ex non quas a sunt modi nisi earum nostrum reprehenderit harum et ea obcaecati,
ipsam vitae autem nulla?
</div>
<div class="container container-2">
<h1 class="heading-2">The column-span Property none value </h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur eaque magnam quidem, possimus
officia
sunt. Culpa, explicabo eveniet. Fugiat, nulla itaque. Beatae nihil consectetur amet rem. Quo quia illo
cumque. Hic asperiores, ex non quas a sunt modi nisi earum nostrum reprehenderit harum et ea obcaecati,
ipsam vitae autem nulla?
</div>
</body>
Column-width property
The column-width property is used to specify the width of the column.
Column width is a flexible property. Consider column-width to be a suggestion for the browser's minimum width. The columns will stop and collapse into one column once the browser can no longer fit at least two columns to your specified width.
Here are the values for the column-width property:
auto: This value is the default. The width of the column will be set by the browser.
length: A length that indicates the column widths. You can set the value in a variety of ways by providing the value in units such as px, %, and more.
Syntax:
column-width: auto | length;
<head>
<style>
.container-1 {
column-width: 200px;
font-size: 25px;
border: 1px solid;
}
.container-2 {
column-width: 500px;
font-size: 25px;
border: 1px solid;
}
</style>
</head>
<body>
<h1>The column-width Property </h1>
<div class="container-1">
Lorem ipsum dolor ... (80 Words) ... vitae.
</div>
<h1>The column-width Property </h1>
<div class="container-2">
Lorem ipsum dolor ... (80 Words) ... vitae.
</div>
</body>
Columns property
The columns property is a shorthand property for column width and column count.
Column width defines the width of each column, while column count defines the maximum number of columns.
column-width: This value defines the minimum width for each column.
column-count: This value defines the maximum number of columns.
auto: This is the default value. This value sets both column-width and column-count to auto.
Syntax:
columns: auto | column-width column-count;<head>
<style>
.container-1 {
columns: 100px 5;
font-size: 25px;
}
.container-2 {
columns: 200px 3;
font-size: 25px;
}
</style>
</head>
<body>
<h1>The columns Property </h1>
<div class="container-1">
Lorem ipsum dolor ... (80 Words) ... vitae.
</div>
<h1>The columns Property </h1>
<div class="container-2">
Lorem ipsum dolor ... (80 Words) ... vitae.
</div>
</body>
Conclusion
Mastering CSS columns lets you create multi-column layouts easily. You can design responsive and visually appealing web pages by learning their various properties, like column-count, column-width, and column-span. Practice with examples to enhance the content presentation on your website.
I am sure you have become a master of CSS column properties by now. If you still have any questions about this topic or related to web development, then you can ask us those questions by using the question box given below.