J'ai un menu avec 2 colonnes et je veux que la première moitié flotte dans la colonne de gauche et la seconde moitié dans celle de droite.

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>

J'ai trouvé le code suivant qui résoudrait le problème s'il fonctionnait. Ce n'est évidemment pas le cas.

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

Comment faire cela correctement? Merci pour toute aide!

1
Pixelcode 2 sept. 2020 à 12:01

3 réponses

Meilleure réponse

Il semble que vous ayez besoin de grid-auto-flow: column;, il placera l'élément suivant en haut de la colonne suivante après avoir atteint la fin de votre répétition.

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>
1
JHeth 2 sept. 2020 à 09:11
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;
    }
0
Opeolluwa 2 sept. 2020 à 09:14

Ajoutez grid-auto-flow: column dans nav ul et supprimez les règles grid-column: 1 et grid-column: 2.

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>
2
sergey kuznetsov 2 sept. 2020 à 09:11