Web page layout is a really important feature, and you need to make sure your elements are in the right position and there are proper spaces between them. That's why in this topic we will learn how to create spaces between elements. So, how do we do that? One of many ways is with gap property. In this topic we will cover six grid gap-related properties:
grid-row-gapgrid-column-gapgrid-gaprow-gapcolumn-gapgap
From this list, we will only cover three grid gap-related properties, because with the new CSS3 the prefix grid- is not present. That means grid-gap is the same as gap, grid-column-gap is the same as column-gap, and grid-row-gap is the same as row-gap. This is important to keep in mind because browsers still support the deprecated grid- properties and merely treat them as if the grid- prefix wasn't present. In the next section, we will start with the row-gap property.
The row-gap property
The row-gap property defines the size of the gap between the rows in a grid layout. Unlike the gap property, the row-gap property sets the gap between the rows. So, if we were to apply the same 20px to only the row-gap property, it would look something like this:
.container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #9771D5;
padding: 10px;
/* Applying the row-gap property */
row-gap: 20px;
}
.container > div {
background-color: #FDFDFD;
text-align: center;
padding: 20px 0;
font-size: 30px;
border-radius: 5pt;
}And here is the output:
As you can notice in the output, there is only a 20-pixel gap between the items and no gap between the columns. We will add two more rows to the HTML file so you can see that the property will apply to all the rows in the class container:
<body>
<div class="container">
<div class="item-one">Item 1</div>
<div class="item-two">Item 2</div>
<div class="item-three">Item 3</div>
<div class="item-four">Item 4</div>
<div class="item-five">Item 5</div>
<div class="item-six">Item 6</div>
<div class="item-seven">Item 7</div>
<div class="item-eight">Item 8</div>
<div class="item-nine">Item 9</div>
<div class="item-ten">Item 10</div>
<div class="item-eleven">Item 11</div>
<div class="item-twelve">Item 12</div>
</div>
</body>And here is the output:
The column-gap property
The column-gap property specifies the gap between the columns in a grid, flexbox, or multi-column layout. Unlike gap, the column-gap property set the gap between the columns. So, if we were to apply the same 20px to only the column-gap property, it would look something like this:
.container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #9771D5;
padding: 10px;
/* Applying the column-gap property */
column-gap: 20px;
}
.container > div {
background-color: #FDFDFD;
text-align: center;
padding: 20px 0;
font-size: 30px;
border-radius: 5pt;
}The code output:
Now that you've learned how to use the gap property, there is a shorter way to implement different values for column-gap and row-gap in one line of code. You can do this by simply using the gap property. It is quite simple: you just need to write two different values in the same line of code. Let's compare two examples that give the same output. In this example, you want to make a 20px gap between columns and a row gap of 30 px. But what if you want to do it with one line of code instead of two? This is how you do it:
.container {
column-gap: 20px;
row-gap: 30px;
}The code snippet above will give you the same results as this one:
gap: 30px 20px;The code output for both code snippets:
The important thing to remember here is its syntax. The first value is row-gap, and the second value is column-gap.
The gap property
The gap property is a CSS property that defines the size of the gap between rows and columns in the grid layout. The gap property is a shorthand for row-gap and column-gap properties. It works with values of any length, such as px, %,em, and others. By default, there is no gap between rows and columns, meaning its starting value is set to 0. So, where can we use the gap property? We can use it with the grid, and now you can even use it with the flexbox and multi-column layout. In this topic, we will only focus on using the gap property with the grid.
In order to understand the gap property, there are two more properties that work with the gap property. As previously mentioned, they are row-gap and column-gap:
row-gapintroduces a space between row tracks;column-gapintroduces a space between column gaps.
Here ia a picture that demonstrates the difference between the row-gap and column-gap properties:
Now let's see the simple syntax and visual representation of using the gap property. Note that you can see and use this demo on the Developers Mozilla:
Now that you've learned more about the gap property, in this section we will go through one example of its usage. Let's see our starter HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="item-one">Item 1</div>
<div class="item-two">Item 2</div>
<div class="item-three">Item 3</div>
<div class="item-four">Item 4</div>
<div class="item-five">Item 5</div>
<div class="item-six">Item 6</div>
</div>
</body>
</html>In the HTML code, we created the container class with six items or subclasses. Imagine each item as a box that is separated from another item by the gap property. In order to make space between those boxes, or items, we applied the gap property to container. So, what does that really mean? That means that every class found in the container the class has a row-gap and column-gap of 20px. Let's check out the code snippet below:
.container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #9771D5;
padding: 10px;
/* Applying the gap property */
gap: 20px;
}
.container > div {
background-color: #FDFDFD;
text-align: center;
padding: 20px 0;
font-size: 30px;
border-radius: 5pt;
}Here is the code output:
As you can see, there are clear gaps between the six items. Try to delete the gap property and see the difference.
Conclusion
Now that you are at the finish line of this topic, you've got an idea of how to make gaps between your rows and columns using the same or different values. You learned how to use these CSS properties:
gaprow-gapcolumn-gap
All that is left to do is test your knowledge. Let's proceed to practice!