Setting Column Gap using CSS3

To set a column gap on a web page, use the column-gap property. You can set the values as −

column-gap: length|normal|initial|inherit;

The values can be −

  • length − The gap between the columns

  • normal − A normal gap between the columns

Gap between the columns

To set a gap between the columns, we have set a length unit i.e. −

column-gap: 25px;

Example

Let us see an example to set a gap between the columns −

<!DOCTYPE html>
<html>
<head>
   <style>
      .demo {
         column-count: 4;
         -webkit-column-count: 4; /* Chrome, Safari, Opera */
         -moz-column-count: 4; /* Firefox */
         -webkit-column-gap: 25px; /* Chrome, Safari, Opera */
         -moz-column-gap: 25px; /* Firefox */
         column-gap: 25px;
      }
   </style>
</head>
<body>
   <h1>Machine Learning</h1>
   <div class="demo">
      Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. 
      This is due to the fact that huge computing resources are easily available to the common man. 
      The developers now take advantage of this in creating new Machine Learning models and to re-train 
      the existing models for better performance and results. The easy availability of High Performance 
      Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
   </div>
</body>
</html>

A normal gap between the columns

To set a normal gap, use the column-gap property and set it normal −

column-gap: normal;

Example

Let us now see an example to set normal gaps −

<!DOCTYPE html>
<html>
<head>
   <style>
      .demo {
         column-count: 2;
         -webkit-column-count: 2; /* Chrome, Safari, Opera */
         -moz-column-count: 2; /* Firefox */
         -webkit-column-gap: normal; /* Chrome, Safari, Opera */
         -moz-column-gap: normal; /* Firefox */
         column-gap: normal;
      }
   </style>
</head>
<body>
   <h1>Machine Learning</h1>
   <div class="demo">
      Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
   </div>
</body>
</html>

Gap between columns in a grid

To set the gap between columns in a grid, use the column-gap property. The grid layout is created with the display property and the value grid −

#container {
   display: grid;
   border: 2px dashed blue;
   background-color: red;
   column-gap: 20px;
   grid-template-columns: repeat(4,1fr);
}

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      #container {
         display: grid;
         border: 2px dashed blue;
         background-color: red;
         column-gap: 20px;
         grid-template-columns: repeat(4,1fr);
      }
      #container > div {
         border: 2px dotted green;
         padding: 25px;
         background-color: blue;
         color: white;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <div id="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>  
      <div>D</div>
      <div>E</div>
      <div>F</div>
      <div>G</div>  
      <div>H</div>
   </div>
</body>
</html>

Gap between columns in a flexbox container

To set a gap between columns in a flexbox container, use the display property with the value flex −

#container {
   display: flex;
   flex-wrap: wrap;
   border: 2px dashed blue;
   background-color: red;
   column-gap: 40px;
}

Example

Let us see an example −

<!DOCTYPE html>
<html>
<head>
   <style>
      #container {
         display: flex;
         flex-wrap: wrap;
         border: 2px dashed blue;
         background-color: red;
         column-gap: 40px;
      }
      #container > div {
         width: 12%;
         border: 2px dotted green;
         padding: 25px;
         background-color: blue;
         color: white;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <div id="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>  
      <div>D</div>
      <div>E</div>
      <div>F</div>
      <div>G</div>  
      <div>H</div>
   </div>
</body>
</html>

Updated on: 27-Dec-2023

82 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements