The column-width property in CSS is used to specify the desired width of columns in a multi-column layout. The browser automatically determines how many columns can fit within the available space based on the specified width.
- Defines the preferred width for each column.
- Allows the browser to automatically calculate the number of columns needed.
- Creates flexible and responsive multi-column layouts that adapt to the available space.
Syntax:
column-width: auto | length | initial | inherit;Property Values:
- auto: It is the default value. The browser determines the width of the columns.
- length: It is used to specify the width of the columns in terms of length. The length can be set in the form of px, cm etc.
- initial: It is used to set the column-width property to its default value.
- inherit: It is used to set column-width property from its parent.
Example: Using column-width: auto property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
CSS column-width Property
</title>
<!--Driver Code Ends-->
<style>
.gfg {
/* For Chrome, Safari, Opera browsers */
-webkit-column-width: auto;
/* For Firefox browser */
-moz-column-width: auto;
column-width: auto;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h2>
The column-width Property
</h2>
<div class="gfg">
The course is designed for students as well
as working professionals to prepare for
coding interviews. This course is going
to have coding questions from school level
to the level needed for product based
companies like Amazon, Microsoft, Adobe, etc.
</div>
</body>
</html>
<!--Driver Code Ends-->
Example: Using column-width: lengthproperty.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
CSS column-width Property
</title>
<!--Driver Code Ends-->
<style>
.gfg {
/* For Chrome, Safari, Opera browsers */
-webkit-column-width: 100px;
/* For Firefox browser */
-moz-column-width: 100px;
column-width: 100px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h2>
The column-width Property
</h2>
<div class="gfg">
The course is designed for students as well
as working professionals to prepare for
coding interviews. This course is going
to have coding questions from school level
to the level needed for product based
companies like Amazon, Microsoft, Adobe, etc.
</div>
</body>
</html>
<!--Driver Code Ends-->
Example: Using column-width: initial property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
CSS column-width Property
</title>
<!--Driver Code Ends-->
<style>
.gfg {
/* For Chrome, Safari, Opera browsers */
-webkit-column-width: initial;
/* For Firefox browser */
-moz-column-width: initial;
column-width: initial;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h2>
The column-width Property
</h2>
<div class="gfg">
The course is designed for students as well
as working professionals to prepare for
coding interviews. This course is going
to have coding questions from school level
to the level needed for product based
companies like Amazon, Microsoft, Adobe, etc.
</div>
</body>
</html>
<!--Driver Code Ends-->