How to fill elements automatically with css(css grid)?

Question

How to create this mode automatically with css grid?

Because their number is not known and each time may be different

I want the other ones to fill Josh if the forgiveness was empty (like the picture)

.tests {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.tests .test {
    font-weight: 900;
    background-color: rgb(172, 172, 172);
    margin: 3px;
    cursor: pointer;
    border-radius: 10px;
    padding: 5px;
    text-align: center;
}

<div class="tests">
    <span class="test">1</span>
    <span class="test">2</span>
    <span class="test">3</span>
    <span class="test">4</span>
    <span class="test">5</span>
</div>

In your pictures the numbers are from right to left? In your code the numbers are from left to right? Which one do you want? — yunzen, Apr 29 '21 at 10:37
There are always 3 columns but the number of spans and rows is not known — erfan, Apr 29 '21 at 10:49
There is not much difference in the direction of the numbers — erfan, Apr 29 '21 at 10:49

score 2 · Accepted Answer · answered Apr 29 '21 at 10:42

Solution from here: https://stackoverflow.com/a/56339098/476951

.tests {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.tests .test {
    font-weight: 900;
    background-color: rgb(172, 172, 172);
    margin: 3px;
    cursor: pointer;
    border-radius: 10px;
    padding: 5px;
    text-align: center;
}

.tests > *:nth-child(3n-1):nth-last-of-type(1) {
  grid-column: span 2;
}

.tests > *:nth-child(3n-2):nth-last-of-type(1) {
  grid-column: span 3;
}

<div class="tests">
    <span class="test">1</span>
    <span class="test">2</span>
    <span class="test">3</span>
    <span class="test">4</span>
</div>
<br><br>
<div class="tests">
    <span class="test">1</span>
    <span class="test">2</span>
    <span class="test">3</span>
    <span class="test">4</span>
    <span class="test">5</span>
</div>
<br><br>
<div class="tests">
    <span class="test">1</span>
    <span class="test">2</span>
    <span class="test">3</span>
    <span class="test">4</span>
    <span class="test">5</span>
    <span class="test">6</span>
</div>

How to fill elements automatically with css(css grid)?

1 Answers1