如何使用CSS网格将垂直菜单拆分为两个自动宽度列?[副本]

在JS的帮助下,我想这会对你有用

<style>

ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
    height: 300px;
}

</style>

<ul class="ul-element">
    <li>Link with long text 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
    <li>Link 4</li>
    <li>Link 5</li>
    <li>Link 6</li>
</ul>

<script>

const ul = document.querySelector(".ul-element");
const li = ul.getElementsByTagName("li");
const amount = li.length;
const row = Math.ceil(amount / 2);
const height = 100 / row;

for(element of ul.getElementsByTagName("li")){
    element.style = 'height: calc(' + height + '% - 10px);';
}

</script>