Свойство grid-gap

Определяет отступ между строками и столбцами grid сетки. Сокращение для свойств grid-row-gap и grid-column-gap в указанном порядке.

grid-gap: 30px 15px;

поддерживается начиная с
частичная поддержка до
не поддерживается

Значения

grid-gap: 30px 15px;

Первый параметр - отступ между строк 30px. Второй параметр - отступ между столбцов 15px.

<div class="grid-1">
    <div class="grid-1-col  bg-green">1 Колонка</div>
    <div class="grid-1-col  bg-red">2 Колонка</div>
    <div class="grid-1-col  bg-green">3 Колонка</div>
    <div class="grid-1-col  bg-red">4 Колонка</div>
</div>

<style>
    .grid-1 {
        display: grid;
        grid-template-columns: auto auto;
        grid-gap: 30px 15px;
    }
    
    .grid-1-col {
        padding: 1rem;
    }
</style>

1 Колонка

2 Колонка

3 Колонка

4 Колонка

grid-gap: 20px;

Вы можете задать одинаковый отступ между строк и столбцов grid сетки, используя один параметр

<div class="grid-2">
    <div class="grid-2-col  bg-green">1 Колонка</div>
    <div class="grid-2-col  bg-red">2 Колонка</div>
    <div class="grid-2-col  bg-green">3 Колонка</div>
    <div class="grid-2-col  bg-red">4 Колонка</div>
</div>

<style>
    .grid-2 {
        display: grid;
        grid-template-columns: auto auto;
        grid-gap: 20px;
    }
    
    .grid-2-col {
        padding: 1rem;
    }
</style>