CSS - grid-gap Property

Quiz

CSS grid-gap property is a shorthand property used to define the size of the gap between rows and columns in a grid layout. The grid grid-gap property is a shorthand for the following individual grid-related properties: grid-row-gap and grid-column-gap

Syntax

grid-gap: row-gap column-gap;

Property Values

Value	Description
row-gap	It specifies the gap between the rows in a grid layout using length or percentage values.
column-gap	It specifies the gap between the columns in a grid layout using length or percentage values.

Examples of CSS Grid Gap Property

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

Grid Gap Property using Length Values

To set the vertical and horizontal gaps between the rows and columns in single statement, we specify the gap values (in length-px,em etc.) to the grid-gap property. The property takes upto two values, a single value applies the same gap in both directions while two values set vertical and horizontal gaps respectively and separately. 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-gap: 25px;
      }

      .container2 {
         grid-gap: 15px 56px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-gap Property
   </h2>
   <h4>
      grid-gap: 25px (horizontal and vertical
      gap of 25px between rows and 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: 15px 56px (vertical gap of 15px
      and horizontal gap of 56px between rows and 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 Gap Property using Percentage Values

To set the vertical and horizontal gaps between the rows and columns in single statement, we specify the gap values (in percentage) to the grid-gap property. The property takes upto two values, a single value applies the same gap in both directions while two values set vertical and horizontal gaps respectively and separately. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         height: 200px;
         width: 500px;
         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-gap: 10%;
      }

      .container2 {
         grid-gap: 15% 20%;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-gap Property
   </h2>
   <h4>
      grid-gap: 10% (horizontal and vertical
      gap of 10% relative to the size of the
      container applied to rows and 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: 15% 20% (vertical gap of 15%
      and horizontal gap of 20% relative to the size
      of the container applied to rows and 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>

Supported Browsers

Property
grid-gap	57	16	52	10.1	44

css_properties_reference.htm

Print Page