Gap
column-gap
CSS
.container {
display: grid;
grid-template: repeat(3, 1fr) / repeat(4, 1fr);
column-gap: 20px;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
row-gap
CSS
.container {
display: grid;
grid-template: repeat(3, 1fr) / repeat(4, 1fr);
row-gap: 20px;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
gap
CSS
.container {
display: grid;
grid-template: repeat(3, 1fr) / repeat(4, 1fr);
gap: 40px 20px; // row column
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
CSS
.container {
display: grid;
grid-template: repeat(3, 1fr) / repeat(4, 1fr);
gap: 20px; // both row and column
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9