Skip to content
Related Articles

Related Articles

Improve Article

How to specify the optimal width for the columns in CSS ?

  • Last Updated : 31 Mar, 2021

In this article, we will learn to specify the optimal width for the columns in CSS. The column-width property of CSS is used to specify the optimal width for the columns.

Approach: We can specify the optimal width for the columns in CSS using the column-width property. We set a value for the column width, and all column’s widths are not less than the specified value.

Syntax:

column-width: value;

Example 1: The following example demonstrates setting column-width property. The output results in four columns for the content.

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
        .gfg{
          font-size: 30px;
          column-width: 160px;
        }
    </style>
  </head>
  <body>
    <div class="parent" style="width:50%;">
      <div class="gfg">
        GeeksforGeeks is my favourite site where 
        i can gain a lot of knowledge and can
        also share my knowledge what i have gained
        while learning. We can add more 
        pharagraphs for content. This is just an 
        example to tell you how to specify 
        the optimal width for the columns in CSS? 
        The column width is 160px in this example. 
      </div>
    </div>
  </body>
</html>

Output:



Example 2: The following example demonstrates setting attributes like column-count and column-width for the text content.

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
        .gfg{
          font-size: 30px;
          column-count: 3;
          column-width: 160px;
        }
    </style>
  </head>
  <body>
    <div class="parent" style="width: 50%;">
      <div class="gfg">
        GeeksforGeeks is my favourite site where 
        i can gain a lot of knowledge and can
        also share my knowledge what i have 
        gained while learning. We can add more 
        pharagraphs for content. This is just 
        an example to tell you how to specify 
        the optimal width for the columns in CSS? 
        The column width is 160px in this example. 
      </div>
    </div>
  </body>
</html>

Output:

column-width and column-count




My Personal Notes arrow_drop_up
Recommended Articles
Page :