
- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
How to specify the number of columns an element should be divided into with CSS
To specify the number of columns an element should be divided into, use the column-count property.
You can try to run the following code to implement the column-count property with 4 columns
Example
<!DOCTYPE html> <html> <head> <style> .demo { column-count: 4; } </style> </head> <body> <div class = "demo"> This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div> </body> </html>
- Related Articles
- How to set or return the number of columns an element should be divided into with JavaScript?
- Set how many columns an element should span across with CSS
- Specify the left padding of an element with CSS
- Specify the bottom padding of an element with CSS
- Specify the top padding of an element with CSS
- Specify the right padding of an element with CSS
- How to specify whether the content of an element should be translated or not in HTML?
- How to specify the number of columns a table cell should span in HTML?
- Specify width for the columns with CSS
- Specify the number of columns in a CSS grid layout
- Specify the gap between the columns with CSS
- How to specify that an element should be pre-selected when the page loads in HTML?
- Set how many columns an element should span across with JavaScript.
- Determine whether an element should be visible when not facing the screen with CSS
- How to specify the type of box used for an HTML element using CSS?

Advertisements