网格系统水平顺序

Question

有什么方法可以在不添加任何div的情况下完成以下订单吗？

t1 t2 t3

d1 d2 d3

<dl>
<dt>t1</dt>
<dd>d1</dd>
<dt>t2</dt>
<dd>d2</dd>
<dt>t3</dt>
<dd>d3</dd>
</dl>

Answer 1

如果不添加div，我会添加网格系统排序，如下所示：

<dl class="row">
<dt class="col-4 order-1">t1</dt>
<dd class="col-4 order-4">d1</dd>
<dt class="col-4 order-2">t2</dt>
<dd class="col-4 order-5">d2</dd>
<dt class="col-4 order-3">t3</dt>
<dd class="col-4 order-6">d3</dd>
</dl>

Answer 2

只需将父元素显示到网格

display: grid;

并在以下永久应用

grid-auto-flow: dense;

或者你可以使用

grid-auto-flow: column dense 1fr;