Grid items overlapping when resizing browser with columns set to 1fr

Question

I'm designing my website with CSS grid and I am facing a real issue when defining my grid with 1fr.

Everything looks fine in large browser window, but the items start to overlap as the browser window gets quite small.

Has anyone experienced that? And if so, has anyone a solution?

my html

<div id="box-0"></div>
<div class="box-1">TextTextTextTextTextTextTextText</div>
<div class="box-2">TextTextTextTextTextTextTextText</div>
<div class="box-3">TextTextTextTextTextTextTextText</div>
<div class="box-4">TextTextTextTextTextTextTextText</div>
<div class="box-5">TextTextTextTextTextTextTextText</div>
<div class="box-6">TextTextTextTextTextTextTextText</div>
<div class="box-7">TextTextTextTextTextTextTextText</div>
<div class="box-8">TextTextTextTextTextTextTextText</div>

my css

body {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    grid-template-rows: auto;
    grid-gap: 10px;
}

#box-0 {
    grid-row: 1;
    grid-column: 1/10;
    background-color: blue;
}

.box-1 {
    grid-row: 2/span 2;
    grid-column: 1/2;
    background-color: blue;
}

.box-2 {
    grid-row: 4/span 2;
    grid-column: 1/2;
    background-color: blue;
}

.box-3 {
    grid-row: 2/span 1;
    grid-column: 2/10;
    background-color: blue;
}

.box-4 {
    grid-row: 3/span 3;
    grid-column: 2/8;
    background-color: blue;
}

.box-5 {
    grid-row: 3/span 3;
    grid-column: 8/10;
    background-color: blue;
}

.box-6 {
    grid-row: 6/span 2;
    grid-column: 1/4;
    background-color: blue;
}

.box-7 {
    grid-row: 6/span 2;
    grid-column: 4/7;
    background-color: blue;
}

.box-8 {
    grid-row: 6/span 2;
    grid-column: 7/10;
    background-color: blue;
}