0

I have menu with a number of elements that I don't know:

<ul>
  <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>
  <li>Link 7</li>
</ul>

I'm trying to split it in 2 columns with auto width and equal amount of elements in each:

The following CSS does the job but it requires me to manually specify amount of rows.

ul {
  display: grid;
  gap: 10px 40px;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, 1fr);
}

Is there any way to 'tell' CSS "rows should be half of element count"? Or maybe there are better ways to solve this?

user64675
  • 482
  • 7
  • 25
  • Please don't report the same question again. the linked duplicate to your original question already states that this is not possible. You will have to rethink your approach. – Paulie_D Oct 15 '21 at 10:39
  • The original post was closed with a link to other CSS columns post. So I assumed that whoever closed it didn't read to the CSS grid part. So this time I asked about CSS grid. Please stop closing questions that have people trying to answer them. – user64675 Oct 15 '21 at 10:43
  • Your still trying to solve the same problem....and there is no CSS method to do this. You need JS or an different approach. – Paulie_D Oct 15 '21 at 10:47

1 Answers1

-1

With some help from JS i think this would work for you

<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>
Trailblazer17
  • 9
  • 1
  • 7