YogeshChauhan.com
How to add multiple Columns in CSS like Bootstrap?
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

Sources

dreamhost

Leave a Reply

Most Read

#1 How to set opacity or transparency using CSS? #2 Pagination in CSS with multiple examples #3 How to check if radio button is checked or not using JavaScript? #4 How to make HTML form interactive and using CSS? #5 How to uninstall Cocoapods from the Mac OS? #6 How to add Read More Read Less Button using JavaScript?



Recently Posted

Feb 24 How to modify the latest post array using get_posts() in WordPress? Feb 22 WordPress: How to get ACF field values from another post? Feb 22 WordPress: How to print ACF repeater field values? Feb 22 WordPress: How to print ACF array field values? Feb 21 WordPress: How to get field values in Advanced Custom Fields? Feb 21 WordPress: How to add a Search Icon in Menus with toggle effect using jQuery?



You might also like these

How to Write Complex Search Queries in SQL?SQL/MySQLQuery to increment or decrement value in MySQL ignoring negative valuesSQL/MySQLSolution to “TypeError: ‘x’ is not iterable” in Angular 9AngularJavaScript String fromCharCode() MethodJavaScriptHow to Remove PHP File Extensions From Your Website URLs?PHPHow to deploy Angular App on Dreamhost or Amazon S3 or firebase?Angular