Html 网格系统水平顺序

我有没有办法在不添加任何div的情况下完成以下命令

t1 t2 t3

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

d1 d2 d3

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

t1
d1
t2
d2
t3
d3

如果不添加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>

t1
d1
t2
d2
t3
d3

只需将父元素显示到网格中即可

display: grid;

然后把peropery应用到下面

grid-auto-flow: dense;

或者你可以使用

grid-auto-flow: column dense 1fr;