HTML

Example of Column Properties in CSS

Programmingempire

In this article, I will give an example of Column Properties in CSS. Basically, following properties are there in CSS that allows us to style columns in a web page.

  • columns
  • column-width
  • column-span
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-width
  • column-rule-style

The following code shows an Example of Column Properties in CSS

ColumnProperties.html

<html>
 <head>
  <title>Column Properties Example</title>
  <style>
     body{
       margin: 50px;
     }
     .mydiv{
        width: 80%;
        padding: 20px;
        border: 5px #ff99aa solid;
        columns: 4 100px;
        column-rule: #99ff77 12px inset;
        column-gap: 30px;
     }
  </style>
 </head>
 <body>
   <h1>Columns in a Web Page</h1>
   <div class="mydiv">
     Column properties in CSS provide us a way to create multi-column web page.      Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.
   </div>
 </body>
</html> 

Output

Demonstrating an Example of Column Properties in CSS
Demonstrating an Example of Column Properties in CSS

As can be seen in the above example, the columns property sets the column-count and column-width. Therefore, we can use columns property to specify these values instead of using the two separate properties. While the column-gap specifies the width of gap between columns. Similarly we use the column-rule property for specifying the width, style, and color of the rule between each column.

Another example of using column properties is here. The following code shows how to use the column-fill property. Basically, the column-fill property tells that whether the column are balanced or not. Further, this property takes these values – balance, and auto. While balance is the default value. When we use the balance value, the columns are filled with the same amount of content. As can be seen in the following example, that shows three columns with balanced content.

Columns1.html

<html>
 <head>
  <title>Column Properties Example</title>
  <style>
     body{
       margin: 50px;
     }
     .mydiv{
        width: 80%;
        height: 300px;
        padding: 20px;
        columns: 3;
        column-rule: #dd11ee 3px solid;
        column-fill: balance;
     }
  </style>
 </head>
 <body>
   <h1>Columns in a Web Page</h1>
   <div class="mydiv">
     Column properties in CSS provide us a way to create multi-column web page.      Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.
   </div>
 </body>
</html> 

Output


Three Columns with column-fill is set to balance
Three Columns with column-fill is set to balance

Another value for column-fill property is auto. In fact, this property value considers the height of the element on which the columns are being applied. Hence, it keep on filling a column until it reaches to the maximum value of element’s height. After that, it starts filling another column until the content is available. Hence, it doesn’t result in evenly distributed columns. Moreover, if the content is not sufficient, it may happen that number of columns in column-count property don’t appear. The following code demonstrates the auto value of column-fill property.

Columns1.html

<html>
 <head>
  <title>Column Properties Example</title>
  <style>
     body{
       margin: 50px;
     }
     .mydiv{
        width: 80%;
        height: 300px;
        padding: 20px;
        columns: 3;
        column-rule: #dd11ee 3px solid;
        column-fill: auto;
     }
  </style>
 </head>
 <body>
   <h1>Columns in a Web Page</h1>
   <div class="mydiv">
     Column properties in CSS provide us a way to create multi-column web page.      Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.     Column properties in CSS provide us a way to create multi-column web page.
   </div>
 </body>
</html> 

Output

 Three Columns with column-fill is set to auto
Three Columns with column-fill is set to auto

HTML Practice Exercise

Example of Column Properties in CSS

CSS Box Model

Examples of Outline Properties in CSS

Styling Links and Lists

You may also like...