将数组列表划分为3列，但在HTML CSS中没有正确对齐

Question

对象数组，我必须将列表分为3行，其中包含Line，分隔两列，因此，我编写了以下代码:-

HTML
let Arr = [
{ num: 'jkjjk' },
{ num: 'jkjjk' },
{ num: 'jkjjkkj dshdjsh jhsjhsdj' },
{ num: 'jkjjkkj dshdjsh jhsjhsdj' },
{ num: 'jkjjkkj  ' },
{ num: 'jkjjkkj  jhsjhsdj' }
];
{Arr.map((element) => (
<ul className={divide}>
<li>{element.num}</li>
</ul>
)}
<div>
CSS
.divide {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
column-gap: 40px;
column-rule: 1px solid rgba(0, 0, 0, 0);
}

这对我来说是有效的，但是元素列表没有正确对齐，在一行中，第一列元素在顶部&columns元素的其余部分位于该行的中间或底部，因此，我想对齐顶部列中的所有元素，

注意:-对齐不匹配可能是由于元素字符串有太多的长度，这就是为什么它创建的问题，

告诉我如何解决这个问题

Answer 1

尝试:

<ul className="divide">
{Arr.map((element) => (
<li>{element.num}</li>
)}
</ul>

CSS

.divide li {
word-break: break-all;
}