CSS gap

The CSS gap (formerly known as grid-gap) property is used to create or define gap between rows and columns in grid layout.

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div.xyz {display: grid; grid-template-columns: auto auto; gap: 20px;}
      div.xyz > div {border: 2px solid chocolate; padding: 10px;}
   </style>
</head>
<body>

   <h2>The gap Property</h2>
   <div class="xyz">
      <div>This is Robert</div>
      <div>This is Julia</div>
      <div>This is Anna</div>
      <div>This is Olivia</div>
      <div>This is Alma</div>
   </div>
   
</body>
</html>

Output

The gap Property

This is Robert

This is Julia

This is Anna

This is Olivia

This is Alma

Note - The grid as the value of display property, is used to make an element as a block level grid container.

Note - The grid-template-columns is used to define the number of columns to create in grid layout.

The gap property with two values is the shorthand of following two properties:

The gap Property with flex

The gap property can also be used with flex layout. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div.xyz {display: flex; gap: 10px;}
      div.xyz > div {border: 2px solid crimson; padding: 10px;}
   </style>
</head>
<body>

   <div class="xyz">
      <div>A</div>
      <div>B</div>
      <div>C</div>
   </div>
   
</body>
</html>

Output

CSS gap Syntax

The syntax of gap property in CSS, is:

gap: row-gap column-gap;

CSS gap with Two Values

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div.xyz {display: grid; grid-template-columns: auto auto;
         gap: 60px 20px; background-color: peru;}
      div.xyz > div {background-color: maroon; color: whitesmoke; padding: 10px;}
   </style>
</head>
<body>

   <div class="xyz">
      <div>
         <p>This is France</p>
      </div>
      <div>
         <p>This is Spain</p>
      </div>
      <div>
         <p>This is United States</p>
      </div>
      <div>
         <p>This is Mexico</p>
      </div>
      <div>
         <p>This is Germany</p>
      </div>
      <div>
         <p>This is Italy</p>
      </div>
   </div>
   
</body>
</html>

Output

This is France

This is Spain

This is United States

This is Mexico

This is Germany

This is Italy

CSS Online Test

« Previous Tutorial Next Tutorial »