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 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
6 Different Functions to Sort Arrays in PHPPHPWhat is the difference between float and double?MiscellaneousModules and its Core features in JavaScriptJavaScriptAdvanced nesting in Sass (SCSS) using at-rootSCSSFull and Partial CUBE in Postgres with ExamplesPostgresALTER DATABASE in PostgreSQLPostgres