How to specify the optimal width for the columns in CSS ?
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" > w3wiki 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" > w3wiki 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: