CSS Multiple Columns is a property used to divide content into multiple columns, similar to a newspaper layout. It improves readability and organizes content efficiently across different screen sizes.
Key Properties of CSS Multiple Columns
Below is a list of essential CSS properties for working with multiple columns:
The column-count property
The column-count property in CSS defines the number of columns into which the content of an element is divided.11
HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->
<style>
.content {
column-count: 3;
}
</style>
<!--Driver Code Starts{-->
</head>
<body>
<div class="content">
This text is divided into three columns using the column-count property.
It helps in creating newspaper-style layouts and enhances readability
for large chunks of text by splitting them into multiple columns.
</div>
</body>
</html>
<!--Driver Code Ends }-->
In this Example:
- column-count: 3;: Specifies that the content inside the element is divided into three columns.
- Used for creating layouts similar to newspapers or magazines.
The columns-gap property
The column-gap property in CSS is used to specify the space between columns in a multi-column layout.
HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->
<style>
.content {
column-count: 3;
column-gap: 30px;
text-align: justify;
}
</style>
<!--Driver Code Starts{-->
</head>
<body>
<h1 style="text-align: center; color: green;">GeeksforGeeks</h1>
<div class="content">
GeeksforGeeks is a computer science portal for geeks. It provides various tutorials, articles,
and courses to prepare for interviews at top companies like Microsoft, Amazon, and Google.
</div>
</body>
</html>
<!--Driver Code Ends }-->
In this Example:
- column-count: 3;: Divides the content into three columns.
- column-gap: 30px;: Sets a 30px gap between the columns to improve readability.
The column-rule-style property
The column-rule-style property in CSS specifies the style of the rule (line) between columns in a multi-column layout.
HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->
<style>
.content {
column-count: 3;
column-rule-style: solid;
text-align: justify;
}
</style>
<!--Driver Code Starts{-->
</head>
<body>
<div class="content">
GeeksforGeeks is a computer science portal for geeks. It provides tutorials, articles,
and courses to prepare for interviews at top companies like Microsoft, Amazon, and Google.
</div>
</body>
</html>
<!--Driver Code Ends }-->
In this Example:
- column-count: 3;: Divides the content into three columns.
- column-rule-style: solid;: Adds a solid line between the columns.
- text-align: justify;: Justifies the text within each column for a cleaner appearance.
The column-rule-width property
The column-rule-width property in CSS specifies the width of the line drawn between columns in a multi-column layout.
HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->
<style>
.content {
column-count: 3;
column-gap: 50px;
column-rule-style: solid;
column-rule-width: 10px;
text-align: justify;
}
</style>
<!--Driver Code Starts{-->
</head>
<body>
<div class="content">
GeeksforGeeks is a computer science portal offering articles, tutorials,
and courses for coding and technical interview preparation.
</div>
</body>
</html>
<!--Driver Code Ends }-->
In this Example:
- column-rule-style: solid;: Specifies a solid line between columns.
- column-rule-width: 10px;: Sets the width of the column rule to 10px.
The column-rule-color property
The column-rule-color property in CSS specifies the color of the line between columns in a multi-column layout.
HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->
<style>
.content {
column-count: 3;
column-rule-style: solid;
column-rule-color: green;
text-align: justify;
}
</style>
<!--Driver Code Starts{-->
</head>
<body>
<div class="content">
GeeksforGeeks is a computer science portal offering articles,
tutorials, and courses for coding and technical interview preparation.
</div>
</body>
</html>
<!--Driver Code Ends }-->
In this Example:
- column-count: 3;: Divides the content into three columns.
- column-rule-style: solid;: Specifies a solid line between the columns.
- column-rule-color: green;: Colors the column rule green for a visually appealing layout.
The column-rule property
The column-rule property in CSS allows you to set the style, width, and color of the rule (line) between columns in a multi-column layout.
HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->
<style>
.content {
column-count: 3;
padding-top: 35px;
column-rule: 10px solid green;
}
</style>
<!--Driver Code Starts{-->
</head>
<body>
<div class="content">
Sudo Placement: Prepare for the Recruitment
drive of product-based companies like Microsoft, Amazon,
</div>
</body>
</html>
<!--Driver Code Ends }-->
In this Example:
- column-count: 3;: Divides the content into three columns.
- column-rule: 10px solid green;: Creates a 10px wide solid green line between the columns.
The column-span property
The column-span property in CSS allows an element to span across multiple columns in a multi-column layout. By setting it to all, you can make an element stretch across all columns.
HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->
<style>
.container {
column-count: 3;
column-gap: 20px;
text-align: justify;
}
.geeks_content {
column-span: all;
font-weight: bold;
margin-bottom: 10px;
}
</style>
<!--Driver Code Starts{-->
</head>
<body>
<div class="container">
<div class="geeks_content">
Sudo Placement: Prepare for the Recruitment drive of product-based
companies like Microsoft, Amazon, Adobe, etc.
</div>
GeeksforGeeks is a computer science portal offering articles, tutorials,
and courses for coding and technical interview preparation.
</div>
</body>
</html>
<!--Driver Code Ends }-->
In this Example:
- column-span: all;: This property ensures the .content element spans across all three columns in the multi-column layout.
- text-align: justify;: This property ensures that the text within the .geeks_content element is justified, meaning the text is aligned evenly along both the left and right margins.
The column-width property
The column-width property in CSS defines the width of each column in a multi-column layout.
HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->
<style>
.geeks_content {
column-width: 250px;
text-align: justify;
}
</style>
<!--Driver Code Starts{-->
</head>
<body>
<div class="geeks_content">
Sudo Placement: Prepare for the Recruitment
drive of product-based companies like Microsoft,
Amazon, Adobe, etc., with a free online placement
</div>
</body>
</html>
<!--Driver Code Ends }-->
In this Example:
- column-width: 250px;: Sets the ideal width for each column to 250 pixels. The browser will determine the number of columns based on this width and the available space.
Best Practices for CSS Multiple Columns
- Maintain Readability: Avoid using too many columns as it may overwhelm the user.
- Responsive Design: Use media queries to adjust the column count and width for different screen sizes.
- Test on Devices: Ensure your multi-column layout looks good on various devices.
- Align with Themes: Match the column rules and gaps with the overall design theme for consistency.
Similar Reads
CSS Text Formatting
CSS Text Formatting allows you to control the visual presentation of text on a webpage. From changing fonts to adjusting spacing and alignment, CSS provides powerful properties to enhance the readability and aesthetic of text. CSS lets you adjust font properties, text alignment, spacing, and decorat
9 min read
CSS Float
The CSS float property is used to move an element out of the normal document flow and position it to the left or right of its container. For example, float: left moves the element to the left, and float: right moves it to the right. Other content will wrap around the floated element which helps to c
3 min read
CSS Lists
CSS Lists are used to display items in a clear and organized manner, either with bullets (unordered) or numbers (ordered). They help keep content neat and structured on a webpage. With CSS, you can customize the look of lists to improve the design and layout of your content. Try It: .custom-item { b
5 min read
CSS Icons
CSS Icons are an essential part of modern web design, offering a visual representation of actions, ideas, and objects. CSS icons offer a compelling way to achieve this by seamlessly integrating scalable and customizable icons into your web design. CSS Icons from various libraries can be effortlessly
5 min read
CSS Overflow
The CSS overflow controls the big content. It tells whether to clip content or to add scroll bars. Try It: .custom-item { border: 1px solid gray; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; border-radius: 3px; margin: auto; margin-top: 5px; max-width: 320px; min-wi
4 min read
CSS Box Model
The CSS Box Model defines how elements are sized, positioned, and rendered on a webpage. When a browser loads an HTML document, it creates a DOM tree and assigns a box to each element. This box calculates the element's dimensions and position relative to its parent or the root <html> element,
8 min read
CSS Combinators
CSS combinators define the relationship between two selectors. CSS selectors are patterns used to select elements for styling. A CSS selector can be simple or complex, consisting of more than one selector connected using combinators. Understanding these combinators is essential for precise and effic
4 min read
CSS Opacity / Transparency
The opacity in CSS is the property of an element that describes the transparency of the element. It is the opposite of transparency & represents the degree to which the content will be hidden behind an element. Try It: .custom-item { border: 1px solid gray; font-family: 'Gill Sans', 'Gill Sans M
6 min read
CSS DropDowns
Dropdown menus are essential for interactive websites, allowing users to access multiple links from a single menu. Using CSS, you can design stylish and functional dropdown menus that enhance the user experience. This article will cover various types of dropdowns and how to implement them using CSS.
6 min read
CSS Links
A link is a connection from one web page to another web page. CSS property can be used to style the links in various different ways.States of Link: Before discussing CSS properties, it is important to know the states of a link. Links can exist in different states and they can be styled using pseudo-
5 min read