0

I have menu with dynamic number of elements:

<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 top to bottom columns with auto width height:

enter image description here

I tried to use columns, but both column widths are 50%, even though second column in my example doesn't need to be that big. As a result, menu can't be visually centered.

ul {
  display: block;
  column-gap: 40px;
  columns: 2;
}
li {
  margin-bottom: 10px;
}

Then I tried to use grid. It gives me what I want except that I have to explicitly state how many rows I want. Is there a way to state that I want the amount of rows to be equal to half of elements?

ul {
  display: grid;
  gap: 10px 40px;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, 1fr);
}
user64675
  • 482
  • 7
  • 25
  • I find it strange that my queston was closed even though in the end of its description I switched to CSS grid instead of columns. – user64675 Oct 15 '21 at 10:15
  • 1
    That is because there is no definitive answer to this question. Check this out! https://stackoverflow.com/questions/44092529/make-grid-container-fill-columns-not-rows – Tsubasa Oct 15 '21 at 10:20

0 Answers0