| Interactive Media Design

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 gap property 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-gap the second value is for column-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.

References