Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS grid-column-gap

The grid-column-gap is the space between the columns in a grid.

This property accepts any length value, such as, px, %, em, and others.

The default is 0, meaning there is no gap between the columns.

Example

#

A grid container with a grid-column-gap of 30-pixels.

1
2
3
4
5
6
7
8
9
10
11
<style>
  .grid-container {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-column-gap: 30px;
    grid-row-gap: 10px;
    grid-template-columns: auto auto auto auto;
  }

  .grid-container > div {
    background-color: aliceblue;
    text-align: center;
    padding: 15px 5px;
    font-size: 18px;
  }
</style>

<div class="grid-container">
  <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>     

Syntax

grid-column-gap: length;

Note:  The grid-column-gap property is synonymous with column-gap. They can be used interchangeably.


Values

#

Value Description
length Default is 0. Any valid CSS length value.

Browser support

This table shows when grid-column-gap support started for each browser.

Chrome
57 Mar 2017
Firefox
52 Mar 2017
IE/Edge
16 Sep 2017
Opera
44 Mar 2017
Safari
10 Sep 2016

You may also like


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides