如何使用 css（css 网格）自动填充元素？ [复制]答案

【问题标题】：How to fill elements automatically with css(css grid)? [duplicate]如何使用 css（css 网格）自动填充元素？ [复制]
【发布时间】：2021-07-22 15:30:27
【问题描述】：

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

因为他们的数量是未知的，而且每次都可能不同

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

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

【问题讨论】：

您的图片中的数字是从右到左的吗？在您的代码中，数字是从左到右的？你要哪一个？
这有帮助吗？ stackoverflow.com/a/56339098/476951
总是三栏吗？
总是有 3 列，但跨度和行数未知
数字的方向差别不大

标签： html css web css-grid autofill

【解决方案1】：

从这里解决：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>

【讨论】：