我想按从左到右的顺序显示多个 div，为它们提供相同的空间并将它们分布在两行中。
e.g.
[第 1 部分] | [第 2 部分] | [第 3 部分]
[第 4 部分] | [第 5 部分] | [第 6 部分]
or
[第 1 部分] | [第 2 部分] | [第 3 部分] | [第四部分]
[第 5 部分] | [第 6 部分] | [第 7 部分] | [第 8 部分]
重要的是我不知道会有多少个元素。如果是六列，那么我需要三列。如果是八列，那么我需要四列。等等。
如果我给网格容器以下属性：
grid-auto-flow: column;
grid-template-rows: repeat(2, 1fr);
然后，我的元素被赋予了正确的空间量，但以错误的顺序显示。
[第 1 部分] | [第 3 部分] | [第 5 部分] | [第 7 部分]
[第 2 部分] | [第 4 部分] | [第 6 部分] | [第 8 部分]
如果我为网格容器提供以下属性：
grid-auto-flow: row;
grid-template-rows: repeat(2, 1fr);
然后元素出现在单列中。
[div 1]
[div 2]
...
如果我不知道会有多少个元素，是否有一种简单的方法可以跨 2 行显示我的元素，同时保持从左到右的阅读顺序？
仅 CSS 解决方案，您需要编写一些 CSS 来涵盖许多情况。下面的代码最多覆盖 12 个元素，CSS 并没有那么大。您可以不断添加更多内容以涵盖更多案例。
.box {
display: grid;
grid-auto-flow:columns;
grid-auto-columns:1fr;
counter-reset: divs;
margin: 5px;
border:1px solid;
}
.box div {
border:1px solid red;
}
.box div:before {
counter-increment: divs;
content: counter(divs);
}
.box div:nth-child(1):nth-last-child(2) ~ *,
.box div:nth-child(2):nth-last-child(3) ~ *,
.box div:nth-child(3):nth-last-child(4) ~ *,
.box div:nth-child(4):nth-last-child(5) ~ *,
.box div:nth-child(5):nth-last-child(6) ~ *,
.box div:nth-child(6):nth-last-child(7) ~ *
/*
.box div:nth-child(N):nth-last-child(N+1) ~ *
*/{
grid-row:2;
}
<div class="box">
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
用于生成 CSS 的 SASS 代码（您可以在这里尝试：https://www.sassmeister.com/ https://www.sassmeister.com/)
$n:12; /* make this a big as you need */
@for $i from 1 through $n {
.box div:nth-child(#{$i}):nth-last-child(#{$i + 1}) ~ *{grid-row:2}
}
您还可以覆盖奇数个元素：
.box {
display: grid;
grid-auto-flow:columns;
grid-auto-columns:1fr;
counter-reset: divs;
margin: 5px;
border:1px solid;
}
.box div {
border:1px solid red;
grid-row:1;
}
.box div:before {
counter-increment: divs;
content: counter(divs);
}
.box div:nth-child(1):nth-last-child(2) ~ *,
.box div:nth-child(2):nth-last-child(2) ~ *,
.box div:nth-child(2):nth-last-child(3) ~ *,
.box div:nth-child(3):nth-last-child(3) ~ *,
.box div:nth-child(3):nth-last-child(4) ~ *,
.box div:nth-child(4):nth-last-child(4) ~ *,
.box div:nth-child(4):nth-last-child(5) ~ *,
.box div:nth-child(5):nth-last-child(5) ~ *,
.box div:nth-child(5):nth-last-child(6) ~ *,
.box div:nth-child(6):nth-last-child(6) ~ *,
.box div:nth-child(6):nth-last-child(7) ~ *,
.box div:nth-child(7):nth-last-child(7) ~ *{
grid-row:2;
}
<div class="box">
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
SASS 代码：
$n:12;
@for $i from 1 through $n {
.box div:nth-child(#{$i}):nth-last-child(#{$i + 1}) ~ *,
.box div:nth-child(#{$i + 1}):nth-last-child(#{$i + 1}) ~ *{grid-row:2}
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
