如何用css(css grid)自动填充元素？

Question

如何使用 css 网格 自动创建此模式？

因为不知道他们的人数，每次可能都不一样

如果宽恕是空的（如图），我希望其他人来填补乔希

.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>

Answer 1

这里的解决方案：

.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>

如何用css(css grid)自动填充元素？

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

html

css

autofill

web

css-grid