CSS or Cascading Style Sheets is a language used to describe the presentation of a document written in HTML or XML. It is used to style web pages and make them look visually appealing. One of the properties in CSS is column-count, which is used to divide the content of an element into multiple columns.
The column-count property is used to specify the number of columns an element should be divided into. It is used with the CSS3 multi-column layout module. This property is used to create a newspaper-like layout where the content is divided into multiple columns. The column-count property is used with the column-width property to specify the width of each column. If the column-width property is not specified, the browser will automatically calculate the width of each column based on the available space.
The column-count property is supported by most modern browsers including Chrome, Firefox, Safari, and Opera. However, it is not supported by Internet Explorer 9 and earlier versions.
Let's take a look at some code examples to understand how the column-count property works.
In this example, we will divide the content of a div element into two columns.
<div style="column-count: 2;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
In the above example, we have used the column-count property to divide the content of the div element into two columns. The content is automatically divided into two columns based on the available space.
In this example, we will divide the content of a div element into three columns with a width of 200 pixels each.
<div style="column-count: 3; column-width: 200px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
In the above example, we have used the column-count property to divide the content of the div element into three columns with a width of 200 pixels each. The content is divided into three columns with a fixed width of 200 pixels each.
In this example, we will divide the content of a div element into four columns with a gap of 20 pixels between each column.
<div style="column-count: 4; column-gap: 20px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
In the above example, we have used the column-count property to divide the content of the div element into four columns with a gap of 20 pixels between each column. The content is divided into four columns with a gap of 20 pixels between each column.
The column-count property is a useful property in CSS that is used to divide the content of an element into multiple columns. It is used with the CSS3 multi-column layout module and is supported by most modern browsers. The column-count property is used with the column-width property to specify the width of each column. If the column-width property is not specified, the browser will automatically calculate the width of each column based on the available space.