Column Property in CSS

This columns CSS shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.

Value	used for
column-count	this specifies the number of columns an element should be divided into
column-fill	this specifies how to fill columns
column-count	the specifies the gap between the columns
column-rule	this shorthand property for setting all the column-rule-* properties
column-rule-color	the specifies the color of the rule between columns
column-rule-style	the specifies the style of the rule between columns
column-count	the specifies the width of the rule between columns
column-rule-width	the specifies how many columns an element should span across
column-width	the specifies a suggested, optimal width for the columns
columns	The shorthand property for setting column-width and column-count.

Source Code :

<!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">
  <title>Document</title>
  <style>
    div{
      border: 5px solid black;
      padding: 10px;
      column-count: 3;
      column-width: 150px;
      column-gap: 50px;
      column-rule-width: 5px;
      column-rule-color: red;
      column-rule-style: solid;
      column-rule: 2px dashed red;
    }

    h1{
      column-span: none;
      column-span: all;
    }
  </style>
</head>
<body>
 
  <div>
    <h1>Column in CSS</h1>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut ducimus quae dolores sapiente! Modi eveniet earum deserunt sunt doloremque impedit et eaque odit quos, explicabo laborum laboriosam perspiciatis voluptatibus maiores aliquid vitae. Nostrum quaerat, dicta delectus unde optio explicabo, eligendi officiis qui et non exercitationem aliquam consectetur quam vero dolor saepe ipsa ut ducimus? Totam perspiciatis quis iure magni possimus molestiae provident sequi fugit maiores hic minima fugiat dolor quos, dicta iste, nobis, molestias quaerat. Odit architecto ducimus perferendis tempora vero magnam cupiditate aut est enim pariatur sequi quia reiciendis nisi, dolorum doloremque accusantium sit, repellendus deserunt, eos amet. Dolor fugiat temporibus deleniti perferendis eum tempora rem a, hic animi praesentium ea? Neque quibusdam, dolorem dolore, veritatis velit iste quas vitae atque corporis consequatur error. Delectus dicta debitis voluptate consequuntur minus rem nemo natus eveniet, inventore fugit facilis ipsum repellat quas incidunt odit quae deserunt exercitationem doloribus. Doloremque, debitis perferendis.
  </div>
</body>
</html>

Output

Column Property in CSS

Source Code :

Output

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects