网格系统水平顺序

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;