How to set length in CSS to set gap between columns?-CSS Tutorial-php.cn

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

王林

Release： 2023-09-04 11:45:02

forward

1107 people have browsed it

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;
}

Copy after login

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>

Copy after login

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;
}

Copy after login

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>

Copy after login

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);
}

Copy after login

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>

Copy after login

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!