Multiple Columns
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Multiple Columns </title>
<style>
.multiColumns {
text-align: justify;
column-count: 3;
column-gap: 30px;
column-rule-style: solid;
column-rule-width: 2px;
column-rule-color: blue;
/* column-rule: 2px solid blue; */ /* Shorthand column rule */
}
</style>
</head>
<body>
<!--
Multi-column layout allows layout like in newspapers.
Multi-column Properties :
- column-count : specifies number of columns an element should be divided into.
- column-gap : specifies the gap between the columns.
- column-rule-style : specifies the style of the rule between columns.
- column-rule-width : specifies the width of the rule between columns.
- column-rule-color : specifies the color of the rule between columns.
- column-rule : is a shorthand property for setting all the column-rule-* properties above.
- column-span : specifies how many columns an element should span across.
- column-width : specifies a suggested, optimal width for the columns.
- column-rule : is a shorthand representation
-->
<h1>Demo: Multiple Columns</h1>
<h3>Multiple Columns layout allows easy definition of multiple columns of text.</h3>
<div>
<p class="multiColumns">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum illum voluptates accusantium non sint facilis architecto ea accusamus! Amet sapiente at esse nesciunt, quibusdam, qui expedita hic illo doloribus quod vel. Dolores ut error quam iusto dignissimos. Libero nemo dicta quos laboriosam doloremque officiis nihil beatae blanditiis sapiente quae, voluptate ratione minus assumenda dolores suscipit minima autem qui. Aliquid, ab quas saepe tempore eos fugit sapiente laudantium dolore magni ea sequi nisi corrupti qui aspernatur harum temporibus dignissimos dicta sed eum. Tempore, corrupti odio, aut beatae magnam, autem fugit esse placeat aperiam illo perferendis nostrum saepe. Qui ex deserunt reprehenderit ipsum ratione praesentium eum sit culpa corporis aut suscipit, eos cupiditate ipsa! Temporibus asperiores expedita, ratione quia iure voluptatibus nesciunt. Minima expedita praesentium officia commodi, nobis iusto iure architecto doloribus aut corrupti fugiat qui ullam est ab consequuntur quis ratione dicta illum nam quos itaque impedit. Aliquid perferendis odio voluptatibus veniam est quae fugit quas officia aut voluptatem quaerat, facilis sed eos explicabo eaque molestias obcaecati ipsa blanditiis consequatur nisi non aspernatur? Provident, libero eum nesciunt dicta sapiente accusantium laborum.</p>
</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum illum voluptates accusantium non sint facilis architecto ea accusamus! Amet sapiente at esse nesciunt, quibusdam, qui expedita hic illo doloribus quod vel. Dolores ut error quam iusto dignissimos. Libero nemo dicta quos laboriosam doloremque officiis nihil beatae blanditiis sapiente quae, voluptate ratione minus assumenda dolores suscipit minima autem qui. Aliquid, ab quas saepe tempore eos fugit sapiente laudantium dolore magni ea sequi nisi corrupti qui aspernatur harum temporibus dignissimos dicta sed eum. Tempore, corrupti odio, aut beatae magnam, autem fugit esse placeat aperiam illo perferendis nostrum saepe. Qui ex deserunt reprehenderit ipsum ratione praesentium eum sit culpa corporis aut suscipit, eos cupiditate ipsa! Temporibus asperiores expedita, ratione quia iure voluptatibus nesciunt. Minima expedita praesentium officia commodi, nobis iusto iure architecto doloribus aut corrupti fugiat qui ullam est ab consequuntur quis ratione dicta illum nam quos itaque impedit. Aliquid perferendis odio voluptatibus veniam est quae fugit quas officia aut voluptatem quaerat, facilis sed eos explicabo eaque molestias obcaecati ipsa blanditiis consequatur nisi non aspernatur? Provident, libero eum nesciunt dicta sapiente accusantium laborum.</p>
</body>
</html>