search

Home  >  Article  >  Web Front-end  >  How to set length in CSS to set gap between columns?

How to set length in CSS to set gap between columns?

王林
王林forward
2023-09-04 11:45:021087browse

How to set length in CSS to set gap between columns?

CSS is a powerful tool in web development that allows developers to create multi-column layouts for text content on web pages. Columns are an effective way to break up long blocks of text into more manageable chunks. An important aspect of CSS columns is the gaps between them.

Different ways to set column spacing in CSS

Here are some of the many ways to set gaps between columns in CSS.

1. Use column-gap attribute

The column-gap property is the most common way to set a gap between columns. This property sets the spacing between columns in a multi-column layout. It is a shorthand property that combines the column-rule-width and column-rule-style properties. For example -

.column-container {
   column-count: 3;
   column-gap: 20px;
}

In the above CSS code, to create three columns, we set the column-count property to 3 and the column-gap property to 20 pixels to set the center gap.

The Chinese translation of

Example 1

is:

Example 1

Set a fixed pixel value for column gaps. 

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         background-color: lightgray;
      }
      h2 {
         text-align:center;
      }
      .column-container {
         column-count: 3;
         column-gap: 20px;
         column-rule: 3px solid;
      }
   </style>
</head>
<body>
   <h2>Setting the column gap using the column-gap Property</h2>
   <div class="column-container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam mauris. Donec euismod, velit eu gravida tempus, massa turpis venenatis velit, a lacinia tortor risus vel risus.</p>
      <p>Quisque elementum bibendum diam, vel ullamcorper justo laoreet quis. Nulla facilisi. In viverra porttitor dapibus. Vivamus gravida erat ac libero congue convallis.</p>
      <p>Quisque elementum bibendum diam, vel ullamcorper justo laoreet quis. Nulla facilisi. In viverra porttitor dapibus. Vivamus gravida erat ac libero congue convallis.</p>
   </div>
</body>
</html>

2. Use the gap attribute

The gap attribute is a new CSS property that was introduced in CSS Grid. We can also use it to set the spacing between columns. This is a shorthand attribute that allows developers to combine row-gap and column-gap attributes together. For example - 

.column-container {
   column-count: 4;
   gap: 15px;
}

In the above CSS code, to create four columns, we set the column-count property to 4 and the column-gap property to 15 pixels to set the middle gap.

Example 2

Use the gap attribute to set a fixed pixel value for column gaps. 

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-color: lightgreen;
      }
      h2 {
         text-align: center;
      }
      .column-container {
         column-count: 4;
         gap: 15px;
         column-rule: 3px dotted;
      }
   </style>
</head>
<body>
   <body>
      <h2>Setting the column gap using the gap Property </h2>
      <div class="column-container">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam mauris. Donec euismod, velit eu gravida tempus, massa turpis venenatis velit, a lacinia tortor risus vel risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam mauris. Donec euismod, velit eu gravida tempus, massa turpis venenatis velit, a lacinia tortor risus vel risus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      </div>
   </body>
</body>
</html>

3. Using CSS variables

CSS variables are custom properties that provide a flexible way to set gaps between columns in multi-column layouts. It allows developers to define reusable values. For example:

:root {
   --column-gap: 20px;
}
.column-container {
   column-count: 3;
   column-gap: var(--column-gap);
}

In the above CSS code, we defined a CSS variable called --column-gap and set its value to 20 pixels and called it in the var() function. To create three columns, we set the column-count property to 3.

The Chinese translation of

Example 3

is:

Example 3

Use CSS variables to set fixed pixel values ​​for column spacing. 

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         background-color: lightgray;
      }
      h2 {
         text-align:center;
      }
      .my-container {
         column-count: 3;
         column-gap: var(--column-gap);
         column-rule: 3px dotted;
      }
   </style>
</head>
<body>
   <h2>Setting the column gap using the CSS variable</h2>
   <div class="my-container"  style="--column-gap: 20px";>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam mauris. Donec euismod, velit eu gravida tempus, massa turpis venenatis velit, a lacinia tortor risus vel risus.</p>
      <p>Quisque elementum bibendum diam, vel ullamcorper justo laoreet quis. Nulla facilisi. In viverra porttitor dapibus. Vivamus gravida erat ac libero congue convallis.</p>
      <p>Quisque elementum bibendum diam, vel ullamcorper justo laoreet quis. Nulla facilisi. In viverra porttitor dapibus. Vivamus gravida erat ac libero congue convallis.</p>
   </div>
</body>
</html>

in conclusion

In the above article, we discussed several ways to set column gaps between columns, including the column-gap attribute, gap attribute, and CSS variables. Overall, setting gaps between columns in CSS is a useful technique for organizing web content.

The above is the detailed content of How to set length in CSS to set gap between columns?. For more information, please follow other related articles on the PHP Chinese website!

css count var column
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：CSS word wrap propertyNext article：CSS word wrap property

Related articles

See more