Yogesh Chauhan's Blog

How to add multiple Columns in CSS like Bootstrap?

in CSS on November 3, 2020

The CSS Multi-column Layout Module extends the block layout mode to allow the easy definition of multiple columns of text.

If your users have trouble reading text because the lines are too long then and it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on.

Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do.

8 Multi-column Properties

1. column-count

2. column-gap

3. column-rule-style

4. column-rule-width

5. column-rule-color

6. column-rule

7. column-span

8. column-width

Two CSS properties control whether and how many columns will appear: column-count and column-width.

The column-count property sets the number of columns to a particular number.

Create Multiple Columns

The column-count property specifies the number of columns an element should be divided into.

The following example will divide the text in the div element into 2 columns


.multiple_column {
  column-count: 2;
}

Specify the Gap Between Columns

The column-gap property specifies the gap between the columns.

The following example specifies a 30 pixels gap between the columns:


.multiple_column {
  column-gap: 30px;
}

Column Rules

The column-rule-style property specifies the style of the rule between columns:


.multiple_column {
  column-rule-style: solid;
}

The column-rule-width property specifies the width of the rule between columns:


.multiple_column {
  column-rule-width: 1px;
}

The column-rule-color property specifies the color of the rule between columns:


.multiple_column {
  column-rule-color: red;
}

The column-rule property is a shorthand property for setting all the column-rule-* properties above.

The following example sets the width, style, and color of the rule between columns:


.multiple_column {
  column-rule: 1px solid red;
}

Specify How Many Columns an Element Should Span

The column-span property specifies how many columns an element should span across.

The following example specifies that the h2 element should span across all columns:


h5 {
  column-span: 1;
}

Specify The Column Width

The column-width property specifies a suggested, optimal width for the columns.

The following example specifies that the suggested, optimal width for the columns should be 100px:


.multiple_column {
  column-width: 100px;
}

Demo

Source: MDN Docs


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Slider animation using CSS transform propertyCSSHow to check if the element exists using JavaScript and jQuery?JavaScriptRendering Elements in ReactReactHow to use Context in React?ReactHow to add a Line Chart in Angular App?AngularA simple example on grid ‘auto-fill’ vs ‘auto-fit’CSS