CSS - grid-column-gap Property

Quiz

CSS grid-column-gap property is used to define the size of the gap (or space) between columns in a grid layout. It specifies the horizontal spacing between columns in a grid container.

Syntax

grid-column-gap: length | percentage;

Property Values

Value	Description
length	It specifies the gap between the columns in a grid layout using length values (px, em etc.)
percentage	It specifies the gap between the columns in a grid layout using percentage values.

Examples of CSS Grid column Gap Property

The following examples explain the grid-column-gap property with different values.

Grid Column Gap with Length Values

The gap between the columns in a grid layout can be set using length values (e.g. 10px, 10em etc.). This sets only the horizontal gap between the columns. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgrey;
         display: grid;
         grid-template-columns: auto auto auto;
         padding: 10px;
      }

      .grid-container>div {
         border: 2px solid green;
         color: white;
         text-align: center;
         background-color: lightgreen;
         padding: 10px;
      }

      .container1 {
         grid-column-gap: 25px;
      }

      .container2 {
         grid-column-gap: 4em;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-column-gap Property
   </h2>
   <h4>
      grid-column-gap: 25px 
      (horizontal gap of 25px between columns)
   </h4>
   <div class="grid-container container1">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
   </div>
   <h4>
      grid-column-gap: 4em 
      (horizontal gap of 4em between columns)
   </h4>
   <div class="grid-container container2">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
   </div>
</body>

</html>

Grid Column Gap with Percentage Values

The gap between the columns in a grid layout can be set using percentage values (e.g. 10%, 2% etc.). This sets only the horizontal gap between the columns. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgrey;
         width: 500px;
         display: grid;
         grid-template-columns: auto auto auto;
         grid-column-gap: 30%;
         padding: 10px;
      }

      .grid-container>div {
         border: 2px solid green;
         color: white;
         text-align: center;
         background-color: lightgreen;
         padding: 10px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-column-gap Property
   </h2>
   <h4>
      grid-column-gap: 30% (horizontal gap of 
      30% relative to container's width)
   </h4>
   <div class="grid-container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
   </div>
</body>

</html>

Supported Browsers

Property
grid-column-gap	57	16	52	10.1	44

css_properties_reference.htm

Print Page