Отображение заданного расстояния с использованием сетки

Question

Я новичок в angular9. Я создаю сетку, используя теги. Затем я хочу покрасить ячейки сетки с учетом расстояния. Пример: дано 6 для расстояния, затем нужно покрасить 6 ячеек из выбранной ячейки. Как я это делаю Пожалуйста, дайте мне несколько инструкций.

<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

компонент. css

.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
grid-auto-rows: 2fr;
}

.grid::before {
content: '';
width: 0;
padding-bottom: 100%;
grid-row: 1 / 1;
grid-column: 1 / 1;
}

.grid > *:first-child {
grid-row: 1 / 1;
grid-column: 1 / 1;
}


.grid > * {
background: rgba(0,0,0,0.1);
border: 1px white solid;
}