CSS: Put first half of childs in left grid column

user_10306323 0
Viewed 837

I've got a menu with 2 columns and I want the first half to float into the left column and the second half into the right one.

nav ul {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: repeat(4,auto);
    }
    
    nav ul li:nth-child(-n+4) {
        grid-column: 1;
    }
    
    nav ul li:nth-child(n+5){
        grid-column: 2;
    }
  
  /*
    
 This would be very annoying if there were
 more than just 4 elements that need to be
 put somewhere else manually.
  
    nav ul li:nth-child(5){
        grid-row: 1;
    }
    
    nav ul li:nth-child(6){
        grid-row: 2;
    }
    
    nav ul li:nth-child(7){
        grid-row: 3;
    }
    
    nav ul li:nth-child(8){
        grid-row: 4;
    }*/
<nav>
  <ul>
    <li><a class="nav-link">One</a></li>
    <li><a class="nav-link">Two</a></li>
    <li><a class="nav-link">Three</a></li>
    <li><a class="nav-link">Four</a></li>
    <li><a class="nav-link">Five</a></li>
    <li><a class="nav-link">Six</a></li>
    <li><a class="nav-link">Seven</a></li>
    <li><a class="nav-link">Eight</a></li>
  </ul>
</nav>

I've come up with the following code which would solve the problem if it worked. Which isn't the case obviously.

nav ul li:nth-child(n+5){
  grid-column: 2;
  grid-row: calc(n-5);
}

How to do this correctly? Thanks for any help!

css-grid css-selectors css html
3 Answers

add grid-auto-flow: column in nav ul, and delete grid-column: 1 and grid-column: 2 rules.

nav ul {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: repeat(4,auto);
        grid-auto-flow: column;
    }
    
    /*nav ul li:nth-child(-n+4) {
        grid-column: 1;
    }
    
    nav ul li:nth-child(n+5){
        grid-column: 2;
    }*/
  
  /*
    
 This would be very annoying if there were
 more than just 4 elements that need to be
 put somewhere else manually.
  
    nav ul li:nth-child(5){
        grid-row: 1;
    }
    
    nav ul li:nth-child(6){
        grid-row: 2;
    }
    
    nav ul li:nth-child(7){
        grid-row: 3;
    }
    
    nav ul li:nth-child(8){
        grid-row: 4;
    }*/
<nav>
  <ul>
    <li><a class="nav-link">One</a></li>
    <li><a class="nav-link">Two</a></li>
    <li><a class="nav-link">Three</a></li>
    <li><a class="nav-link">Four</a></li>
    <li><a class="nav-link">Five</a></li>
    <li><a class="nav-link">Six</a></li>
    <li><a class="nav-link">Seven</a></li>
    <li><a class="nav-link">Eight</a></li>
  </ul>
</nav>

user_135734440

It sounds like what you need is grid-auto-flow: column;, it will place the next item at the top of the next column after it reaches the end of your repeat.

nav ul {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: repeat(4, auto);
        grid-auto-flow: column;
    }
<nav>
  <ul>
    <li><a class="nav-link">One</a></li>
    <li><a class="nav-link">Two</a></li>
    <li><a class="nav-link">Three</a></li>
    <li><a class="nav-link">Four</a></li>
    <li><a class="nav-link">Five</a></li>
    <li><a class="nav-link">Six</a></li>
    <li><a class="nav-link">Seven</a></li>
    <li><a class="nav-link">Eight</a></li>
  </ul>
</nav>

user_76579150 
I suggest **flexbox**.

    <nav>
    <ul>
    <li><a class="nav-link">One</a></li>
        <li><a class="nav-link">Two</a></li>
    ....
    </ul>
    <ul><li><a class="nav-link">five</a></li>
        <li><a class="nav-link">six</a></li>
    
    ...</ul>
    </nav>
    
    
    nav{
    dispaly:flex
    justify-contents:space-between;
    align-items:center;
    }
user_141956430
Related