CSS Properties: How to set the optimal number of columns into which the content of the element will be flowed?

Go to Exercise page

Solution:

HTML Code:

>!DOCTYPE html>>!-- Specifies the document type and version of HTML -->
>html>
>head>
>title>How to set the optimal number of columns into which the content of the element will be flowed>/title>>!-- Sets the title of the HTML document -->
>style type="text/css"> /* Begins a CSS style block */
div{
-webkit-column-count: 5; /* Specifies the optimal number of columns for the division element to 5; specific to WebKit browsers */
column-count: 5; /* Specifies the optimal number of columns for the division element to 5 */
     }
>/style>>!-- Ends the CSS style block -->
>/head>
>body>
>div>>!-- Starts a division element -->
>h1>w3resource Tutorial>/h1>>!-- Inserts an h1 element with the text "w3resource Tutorial" -->
>p>CSS, stands for Cascading Style Sheet is a computer language to describe presentation of HTML and XML web documents.In all the examples of our tutorials, we have used HTML for implementing CSS.>/p>>!-- Inserts a paragraph element with text describing CSS -->
>/div>>!-- Ends the division element -->
>/body>
>/html>

Explanation:

• This HTML document demonstrates how to set the optimal number of columns into which the content of the element will be flowed.
• The CSS style block defines rules for the division element.
• The -webkit-column-count property for the division element is set to 5, which specifies the optimal number of columns for WebKit browsers.
• The column-count property for the division element is also set to 5, specifying the optimal number of columns.
• The HTML body contains an h1 element with the text "w3resource Tutorial" and a paragraph element describing CSS.
• The content within the division element will be flowed into 5 columns, providing an optimal layout for the content.

Live Demo:

See the Pen column-number-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser

Yes	Yes	Yes	Yes	Yes

Go to Exercise page