码农教程 - 一技在手,衣食无忧! tools

目录

CSS grid-gap Property

❮ Previous Complete CSS Reference Next ❯

Example

Set the gap between rows and columns to 50px:

.grid-container {
  grid-gap: 50px;
}
Try it Yourself »

Definition and Usage

The grid-gap property defines the size of the gap between the rows and columns in a grid layout, and is a shorthand property for the following properties:

Note: This property was renamed to gap in CSS3.  

Show demo ❯

Default value: 0 0
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridGap="50px 100px" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
grid-gap 57 16 52 10 44

CSS Syntax

grid-gap: grid-row-gap grid-column-gap;

Property Values

Value Description Demo
grid-row-gap Sets the size of the gap between the rows in a grid layout. 0 is the default value Demo ❯
grid-column-gap Sets the size of the gap between the columns in a grid layout. 0 is the default value Demo ❯

More Examples

Example

Set the gap between rows to 20px, and the columns to 50px:

.grid-container {
  grid-gap: 20px 50px;
}
Try it Yourself »

Related Pages

CSS tutorial: CSS Grid Layout

CSS reference: The grid-row-gap property

CSS reference: The grid-column-gap property 


❮ Previous Complete CSS Reference Next ❯