CSS Grid-gap Property - Dofactory

• SQL SQL Tutorial SQL Reference Connection Strings
• .NET C# Design Patterns C# Coding Standards C# Code Examples Visual Studio Shortcut Keys
• HTML HTML Tutorial HTML Reference
• CSS CSS Tutorial CSS Reference
• JavaScript JavaScript Tutorial JavaScript Design Patterns

• SQL
• .NET
• HTML
• CSS
• JavaScript

Select tutorial

× Sql Tutorial Sql Reference Connection Strings

Select tutorial

× C# Design Patterns C# Coding Standards C# Code Examples Visual Studio Shortcut Keys

Select tutorial

× HTML Tutorial HTML Reference

Select tutorial

× CSS Tutorial CSS Reference

Select tutorial

× JavaScript Tutorial JavaScript Design Patterns CSS Reference CSS Reference CSS Properties CSS Selectors CSS Length CSS Entities CSS Functions CSS Default Values CSS Properties align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iter-count animation-name animation-play-state animation-timing-fn backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-rad border-bottom-right-ra border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radiu border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-kerning font-size font-stretch font-style font-variant font-weight gap grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows height hyphens @import justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes right row-gap scroll-behavior table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-fn user-select vertical-align visibility white-space width word-break word-spacing word-wrap writing-mode z-index Back to CSS Select Tutorial

• HTML Tutorial
• HTML Reference
• CSS Tutorial
• CSS Reference
• SQL Tutorial
• SQL Reference
• JavaScript Tutorial
• JavaScript Patterns
• C# Design Patterns
• C# Coding Standards
• Connection Strings
• Visual Studio Shortcuts

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. Send Me Opportunities By adding your name & email you agree to our terms, privacy and cookie policies. CSS grid-gap CSS grid-column-start CSS grid-row

The grid-gap is the space between grid rows and columns.

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

The default is 0, meaning no gaps between rows and columns.

Example

#

A grid with a grid-gap of 25 pixels.

1 2 3 4 5 6 7 8 9 10 11 <style> .grid-container { background-color: steelblue; padding: 10px; display: grid; grid-gap: 25px; 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> Try it live

Using grid-gap

#

The grid-gap property is a shorthand property for:

• grid-row-gap
• grid-column-gap

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

grid-column-start grid-row

Syntax

#

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

Values

#

Value	Description
grid-row-gap	Space between the rows. Default value is 0.
grid-column-gap	Space between the columns. Default value is 0.

Note: If only one value is specified, it will be used for both row and column gap values.

Browser support

#

This table shows when grid-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

#

• Our CSS grid-row-gap Property Reference
• Our CSS grid-column-gap Property Reference
• Our CSS Grid Tutorial
• Our HTML Layout Tutorial

grid-column-start grid-row Jack Poorte 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. Send Me Opportunities By adding your name & email you agree to our terms, privacy and cookie policies. Feedback Guides

• CSS Tutorial
• CSS Selectors
• CSS Borders

• CSS Flex
• CSS Grid
• CSS Tables

• CSS Length
• CSS Fonts
• CSS Animation

• CSS Hover
• CSS Images
• CSS Comments

On this page

• CSS grid-gap
• Example
• Using
• Syntax
• Values
• Browser support
• You may also like