6.1 The grid-gap Property
CSS Grid Layout provides flexible tools for managing the space between grid items. The properties
grid-gap, grid-row-gap, and grid-column-gap make it easy to set the spacing
between rows and columns, helping create neat and organized layouts. Let's dive deeper into these properties.
The grid-gap property (shorthand for gap) defines the overall space between grid rows and columns.
It's a shorthand for grid-row-gap and grid-column-gap.
Syntax:
.grid-container {
grid-gap: value;
}
Where:
-
value: gap value between rows and columns. Can be specified in various units (px,%,fr,auto, etc.)
Example 1: Single value for rows and columns
In this example, a gap of 20px will be applied both to rows and columns:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 20px; /* 20px gap between all rows and columns */
}
Example 2: Different values for rows and columns
In this example, two values are used: the first (10px) for rows, the second (20px) for columns:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px 20px; /* 10px between rows, 20px between columns */
}
6.2 The grid-row-gap Property
The grid-row-gap property specifies the gap between rows in the grid. It allows setting an individual value
for the gap between rows, independently of columns.
Syntax:
.grid-container {
grid-row-gap: value;
}
Where:
value: gap value between rows. Can be specified in various units
Example 1: Setting a fixed gap between rows
In this example, the gap between rows will be 15px:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 15px; /* 15px gap between rows */
}
Example 2: Using percentage for the gap
In this example, the gap between rows will be 5% of the row height:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 5%; /* 5% gap of the row height */
}
6.3 The grid-column-gap Property
The grid-column-gap property specifies the gap between columns in the grid. It allows setting an individual
value for the gap between columns, independently of rows.
Syntax:
.grid-container {
grid-column-gap: value;
}
Where:
value: gap value between columns. Can be specified in various units
Example 1: Setting a fixed gap between columns
In this example, the gap between columns will be 25px:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 25px; /* 25px gap between columns */
}
Example 2: Using em for the gap
In this example, the gap between columns will be 2em:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 2em; /* 2em gap between columns */
}
6.4 Combined use of grid-row-gap and grid-column-gap
You can combine the grid-row-gap and grid-column-gap properties for more precise control
over the gaps between rows and columns.
Full implementation example:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Three columns of equal width */
grid-template-rows: repeat(3, 100px); /* Three rows of fixed height */
grid-row-gap: 15px; /* 15px gap between rows */
grid-column-gap: 25px; /* 25px gap between columns */
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of grid-gap, grid-row-gap, and grid-column-gap Usage</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">Item 1</div>
<div class="grid-item item2">Item 2</div>
<div class="grid-item item3">Item 3</div>
<div class="grid-item item4">Item 4</div>
<div class="grid-item item5">Item 5</div>
<div class="grid-item item6">Item 6</div>
</div>
</body>
</html>
Code Explanation:
-
.grid-container: creates a Grid container with three columns of equal width and three rows of fixed height. Uses thegrid-row-gapandgrid-column-gapproperties to set the gaps between rows and columns -
.grid-item: defines basic styles for grid items, such as background color, text color, padding, text alignment, and border
GO TO FULL VERSION