CSS Grid Gaps
Gaps, also known as gutters, are the spaces separating the rows and columns of a grid container.
They appear only between grid rows and columns, never along the outer edges of the grid container.
Out of the box the gap size is 0, so grid items touch each other with no spacing.
Three properties let you change that:
column-gap— controls spacing between grid columnsrow-gap— controls spacing between grid rowsgap— shorthand forrow-gapandcolumn-gap
The CSS column-gap Property
Use column-gap to control the space between a grid's columns.
Example
Grid columns sit 50 pixels apart from each other in this example.
Prompt
Create a CSS Grid layout with a container that has 3 columns and at least 5 grid items (numbered 1-5). Set a 50px gap between the columns using the column-gap property.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid column-gap</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
column-gap: 50px;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The column-gap Property</h1>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
The CSS row-gap Property
Use row-gap to control the space between a grid's rows.
Example
Grid rows sit 50 pixels apart from each other in this example.
Prompt
Create a CSS Grid layout with a container that has 3 columns and at least 5 grid items (numbered 1-5). Set a 50px gap between the rows using the row-gap property.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid row-gap</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
row-gap: 50px;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The row-gap Property</h1>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
The CSS gap Property
Writing gap is a shorthand for writing row-gap and column-gap.
Given a single value, it applies the same gap to rows and to columns.
Given two values, it reads the first as row-gap and the second as column-gap.
Single value
One value gives both rows and columns a 50px gap.
Prompt
Create a CSS Grid layout with a container that has 3 columns and at least 5 grid items (numbered 1-5). Use the gap shorthand property with a single value of 50px to set equal gaps between both rows and columns.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid gap - Single Value</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
gap: 50px;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The gap Property (Single Value)</h1>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
Two values
Two values give rows a 30px gap and columns a 100px gap.
Prompt
Create a CSS Grid layout with a container that has 3 columns and at least 5 grid items (numbered 1-5). Use the gap shorthand property with two values: 30px for row gap and 100px for column gap.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid gap - Two Values</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
gap: 30px 100px;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The gap Property (Two Values)</h1>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
CSS Grid Gap Properties
The CSS grid gap properties in brief:
column-gap— the space left between grid columnsgap— shorthand for bothrow-gapandcolumn-gaprow-gap— the space left between grid rows