CSS gap Property

The gap property specifies the space between rows and columns.

The gap value can be any length value, including percentages.

This property is used by column, flexbox and grid layout systems.

Example

#

A flex layout with a gap of 25 pixels.

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
  .flex {
    background-color: #776fac;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
  }

  .flex > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
    width: 100px;
  }
</style>

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
</div>          

Syntax

gap: length | normal | initial | inherit;

Values

#

Value Description
length Gap width any length value or percentage.
normal Default. Sets a normal gap, which is 1em.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see different gap values.

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
  .flex-gap {
    background-color: #776fac;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: normal;
  }

  .flex-gap > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
    width: 100px;
  }
</style>

<div class="flex-gap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
</div>          

Browser support

This table shows when gap support started for each browser.

Chrome
50.0 Apr 2016
Firefox
52.0 Mar 2017
IE/Edge
10.0 Sep 2012
Opera
37.0 May 2016
Safari
9.0 Sep 2015

You may also like

Guides