Неожиданное поведение CSS-сетки в Chrome для grid-template-rows

Question

.grid-wrapper {
    display: grid;
    grid-template-columns: [start] repeat(2, 1fr) [left] 1fr [half] 1fr [right] repeat(2, 1fr) [end];
    grid-template-rows: auto; /* repeat(4, 1fr); */
    grid-gap: 30px;
}

.grid-item {
    min-height: 100px;
    background: #f3f3f3;
    grid-column: span 2;
    grid-row: auto;
}

    <div class="grid-wrapper">
        <div class="grid-item" style="grid-column: start / half;"></div>
        <div class="grid-item" style="grid-column: half / end;"></div>
        <div class="grid-item" style="background: silver; grid-column: start / right;"></div>
        <div class="grid-item" style="background: #999; grid-column: right / end; grid-row: span 3;"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item" style="background: #666; grid-row: span 2;"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item" style="background: #d8d8d8; grid-column: left / end;"></div>
        <div class="grid-item"></div>
    </div>

У меня довольно простая сетка с 6 столбцами. При размещении некоторых элементов сетки над двумя столбцами или строками Chrome отображает результат с неожиданным пробелом. Другие браузеры, такие как FF и Safari, делают это правильно. Установка повторения сетки-шаблона-строки (4, 1fr) решает проблему, но разве не должны работать сетки-шаблоны-строки: авто также? Или я что-то упускаю?

См. Пример с сетками-шаблонами-строками: auto on Codepen

.grid-wrapper {
    display: grid;
    grid-template-columns: [start] repeat(2, 1fr) [left] 1fr [half] 1fr [right] repeat(2, 1fr) [end];
    grid-template-rows: repeat(4, 1fr);
    grid-gap: 30px;
}

.grid-item {
    min-height: 100px;
    background: #f3f3f3;
    grid-column: span 2;
    grid-row: auto;
}

скриншот Chrome vs ff

Спасибо!

Answer 1

этот атрибут, который даст вам пространство

разрыв сетки: 30px;

удали его и попробуй