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

erfan 发表于 Dev

二凡

如何使用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>

云岑

来自这里的解决方案：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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。