The grid-gap property sets the size of the empty space (the "gutter") between rows and columns in a grid layout. It allows you to easily control the spacing between grid items in both horizontal and vertical directions without using margins.
Modern CSS Note: The
grid-gapproperty has officially been renamed to simplygapin modern CSS so that it can be used in both CSS Grid and CSS Flexbox. Whilegrid-gapstill works as a legacy alias, it is best practice to usegaptoday.
It is a shorthand property that combines two different spacing properties into one line:
grid-row-gap (or row-gap)grid-column-gap (or column-gap)Syntax:
.grid-container {
/* grid-gap: row-gap column-gap; */
grid-gap: 20px 50px;
}
| Property | Description |
|---|---|
grid-row-gap |
Sets the size of the gap between the horizontal rows in a grid layout. The default value is 0. |
grid-column-gap |
Sets the size of the gap between the vertical columns in a grid layout. The default value is 0. |
grid-gap |
Shorthand to set both. If only one value is provided (e.g., grid-gap: 20px;), it applies the same gap to both rows and columns. |
Let's explore how the gap property creates visually appealing layouts by separating items effectively.
In this example, we use the gap property to give a specific, fixed pixel distance between the rows and columns.
<!DOCTYPE html>
<html>
<head>
<title>CSS grid-gap Property</title>
<style>
.container {
text-align: center;
font-family: sans-serif;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
/* 10px between rows, 50px between columns */
grid-gap: 10px 50px;
background-color: navy;
padding: 15px;
border-radius: 5px;
}
.grid-container > div {
background-color: lightblue;
color: navy;
text-align: center;
padding: 20px 0;
font-size: 30px;
font-weight: bold;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<h3 style="color: navy;">IntricateDevo: Fixed Grid Gap</h3>
<p>This grid has a <strong>50px</strong> gap between columns and a <strong>10px</strong> gap between rows.</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
</body>
</html>
In this example, we use percentage values to define the gap. This makes the spacing dynamic, meaning the gaps will shrink or grow depending on the size of the parent container or the browser window.
<!DOCTYPE html>
<html>
<head>
<title>CSS grid-gap Property</title>
<style>
.container {
text-align: center;
font-family: sans-serif;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
/* 5% row gap, 8% column gap */
grid-gap: 5% 8%;
background-color: navy;
padding: 6%;
border-radius: 5px;
}
.grid-container > div {
background-color: lightblue;
color: navy;
text-align: center;
padding: 20px 0;
font-size: 30px;
font-weight: bold;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<h3 style="color: navy;">IntricateDevo: Percentage Grid Gap</h3>
<p>This grid has an <strong>8%</strong> gap between columns and a <strong>5%</strong> gap between rows. Try resizing the window!</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
</body>
</html>
The CSS grid-gap (or gap) property is useful for creating visually appealing and well-spaced grid layouts.
gap, row-gap, and column-gap, developers can achieve precise control over the spacing between grid items, enhancing the overall design and usability of their web pages. gap shorthand, extremely old legacy browsers might still require the grid-gap prefix.If a CSS grid is styled with grid-gap: 20px 40px;, how is the spacing applied?