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