Grid Gap
To add spacing between the grid items we can use the row-gap column-gap or the shorthand gap properties.
- The gap properties only affect the spacing in between the grid items
- The gap property is like adding thickness to the grid lines
Row Gap
The row-gap property adds a thickness to the grid lines between the rows of grid items
<main class="grid-container">
<div class="box1 box">One</div>
<div class="box2 box">Two</div>
<div class="box3 box">Three</div>
<div class="box4 box">Four</div>
<div class="box5 box">Five</div>
</main>
.grid-container {
background-color: rgb(219, 216, 216);
border-radius: 5px;
border: 1px solid grey;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
row-gap: 1em;
}
.box {
background-color: rgb(134, 169, 235);
border: 2px solid rgb(34, 72, 175);
border-radius: 5px;
align-items: center;
}
One
Two
Three
Four
Five
Column Gap
The column-gap property adds a thickness to the grid lines between the columns of grid items
<main class="grid-container">
<div class="box1 box">One</div>
<div class="box2 box">Two</div>
<div class="box3 box">Three</div>
<div class="box4 box">Four</div>
<div class="box5 box">Five</div>
</main>
.grid-container {
background-color: rgb(219, 216, 216);
border-radius: 5px;
border: 1px solid grey;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
column-gap: 1em;
}
.box {
background-color: rgb(134, 169, 235);
border: 2px solid rgb(34, 72, 175);
border-radius: 5px;
align-items: center;
}
One
Two
Three
Four
Five
Gap
The gap property is short hand of defining both row-gap and column-gap values in a single property.
- A single value for the
gapproperty will add the same gap to both row and columns. - Two values will add gap to the row and column separately, the first value is for
row-gapthe second value is forcolumn-gap
<main class="grid-container">
<div class="box1 box">One</div>
<div class="box2 box">Two</div>
<div class="box3 box">Three</div>
<div class="box4 box">Four</div>
<div class="box5 box">Five</div>
</main>
.grid-container {
background-color: rgb(219, 216, 216);
border-radius: 5px;
border: 1px solid grey;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
gap: 1em;
}
.box {
background-color: rgb(134, 169, 235);
border: 2px solid rgb(34, 72, 175);
border-radius: 5px;
align-items: center;
}
One
Two
Three
Four
Five
<main class="grid-container">
<div class="box1 box">One</div>
<div class="box2 box">Two</div>
<div class="box3 box">Three</div>
<div class="box4 box">Four</div>
<div class="box5 box">Five</div>
</main>
.grid-container {
background-color: rgb(219, 216, 216);
border-radius: 5px;
border: 1px solid grey;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
/* row-gap column-gap */
gap: 1em 2em;
}
.box {
background-color: rgb(134, 169, 235);
border: 2px solid rgb(34, 72, 175);
border-radius: 5px;
align-items: center;
}
One
Two
Three
Four
Five
Note
The two values in gap property are separated with a space.