CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



column-gap

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 visually appealing. One of the properties in CSS is column-gap, which is used to set the gap between columns in a multi-column layout.

The column-gap property is used to specify the width of the gap between columns in a multi-column layout. It is used in conjunction with the column-count or column-width property to create a multi-column layout. The column-gap property is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge.

The column-gap property can be set to any valid CSS length value, such as pixels, ems, or percentages. The default value is zero, which means that there is no gap between columns. A positive value will create a gap between columns, while a negative value will cause the columns to overlap.

Here are some examples of how to use the column-gap property:

<div class="multi-column">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
  <p>Sed euismod, velit eget ultrices bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum.</p>
</div>


In this example, we have created a multi-column layout with three columns and a gap of 20 pixels between them. The text is automatically divided into columns, and the gap between them is set using the column-gap property.

<div class="multi-column">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
  <p>Sed euismod, velit eget ultrices bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum.</p>
</div>


In this example, we have created a multi-column layout with a fixed column width of 200 pixels and a gap of 20 pixels between them. The text is automatically divided into columns, and the gap between them is set using the column-gap property.

The column-gap property can also be used with the column-rule property to create a line between columns. The column-rule property is used to specify the style, width, and color of the line between columns. Here is an example:

<div class="multi-column">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
  <p>Sed euismod, velit eget ultrices bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget ultrices bibendum.</p>
</div>


In this example, we have created a multi-column layout with three columns, a gap of 20 pixels between them, and a 1 pixel solid black line between them. The text is automatically divided into columns, and the line between them is set using the column-rule property.

Overall, the column-gap property is a useful tool for creating multi-column layouts in CSS. It allows you to set the gap between columns and create visually appealing designs. By using the column-gap property in conjunction with other CSS properties, you can create complex layouts that are both functional and aesthetically pleasing.

References:

Activity