.block {
--btn-size: 100px;
--gap: calc(var(--btn-size) / 100 * 2) /* 2 процента от ширины кнопки */
}
<div class="block">
<div class="block-header">No.</div>
<div class="block-header">Date</div>
<div class="block-header">Nom</div>
<div class="block-header">Agence</div>
<div class="block-header">Ville</div>
<div class="block-header">Rating</div>
<div class="block-cell">1</div>
<div class="block-cell">21 Nov 2022</div>
<div class="block-cell">Merry</div>
<div class="block-cell">Tattly</div>
<div class="block-cell">Ajaccio</div>
<div class="block-cell">90.6</div>
<div class="block-cell">2</div>
<div class="block-cell">21 Nov 2022</div>
<div class="block-cell">Merry</div>
<div class="block-cell">Tattly</div>
<div class="block-cell">Ajaccio</div>
<div class="block-cell">90.6</div>
</div>
.block {
display: grid;
grid-template-columns: repeat(6, 1fr);
row-gap: 1rem;
}
.block-header {
background: red;
}
.block-cell {
background: lime;
}