Rendre la colonne span toutes les lignes (y compris implicite) dans la grille CSS

Question

J'essaie de faire une colonne de la grille chaque ligne, y compris les lignes implicites.

Je suis tombé sur this question en demandant comment répartir toutes les lignes de la grille. La deuxième réponse a une correction indiquant une meilleure solution. Cela semble fonctionner, mais mon propre exemple et les commentaires sur la deuxième réponse indiquent que cela ne fonctionne pas. Le W3 spec donne également un exemple très proche.

Y at-il un problème avec mon code, ou est-ce un bug dans Firefox, Chrome, et Safari?

I also have this example in a CodePen here.

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    border: 1px solid #666; 
 
    max-width: 1000px; 
 
    padding: 10px; 
 
    display: grid; 
 
    grid-template-columns: 150px 1fr 300px; 
 
    /* grid-template-rows: repeat(auto) [rows-end]; Doesn't seem to help */ 
 
    /* grid-template-rows: [rows-start] repeat(auto) [rows-end]; Doesn't seem to help */ 
 
    grid-template-rows: repeat(auto); 
 
    grid-gap: 10px; 
 
    margin: 10px auto; 
 
    grid-auto-flow: row dense; 
 
    /* justify-items: stretch; */ 
 
    /* align-items: stretch; */ 
 
} 
 

 
.container>* { 
 
    grid-column: 2/3; 
 
    padding: 10px; 
 
    outline: 1px solid #666; 
 
} 
 

 
.pop { 
 
    grid-column: 1/2; 
 
    /* grid-column: 1/-1; If I switch to this, this div will span the full width of the grid, which is exactly what I'm trying to do with rows*/ 
 
} 
 

 
.tertiary { 
 
    grid-column: 1/2; 
 
} 
 

 
.secondary { 
 
    grid-column: 3/3; 
 
    grid-row: 1/-1; 
 
    /* Doesn't work */ 
 
    /* grid-row: rows-start/rows-end; Doesn't work */ 
 
    /* grid-row: 1/rows-end; Also doesn't work */ 
 
    /* grid-row: 1/span 7; This works, but I need to span an unknown number of rows*/ 
 
    /* grid-row: 1/span 99; This is gross and creates 99 rows */ 
 
}

<div class="container"> 
 
    <div class="secondary">Secondary - why doesn't this span all the way to the bottom of the grid?</div> 
 
    <div class="tertiary">Tertiary</div> 
 
    <div class="tertiary">Tertiary</div> 
 
    <div class="tertiary">Tertiary</div> 
 
    <div>Primary</div> 
 
    <div>Primary</div> 
 
    <div>Primary</div> 
 
    <div class="pop">Span tertiary and primary</div> 
 
    <div>Primary</div> 
 
    <div class="tertiary">Tertiary</div> 
 
    <div>Primary</div> 
 
    <div>Primary</div> 
 
</div>

Answer 1

Il y a deux obstacles sur votre chemin.

D'abord, cette ligne de code CSS dans la règle .container:

grid-template-rows: repeat(auto); 

Ce code est invalide. L'argument dans la notation repeat() doit commencer par un entier positif, qui spécifie le nombre de répétitions. Vous n'avez pas cela, donc le code ne fonctionne pas. Plus de détails dans le spec.

En second lieu, même si le code ci-dessus était correct, disons:

grid-auto-rows: auto; (which happens to be the default setting anyway) 

Votre colonne serait toujours pas couvrir toutes les lignes. Ceci est dû au fait que, comme vous avez pu le voir dans the other answer you cited, une définition de piste peut être définie pour couvrir toutes les pistes perpendiculaires uniquement dans la grille explicite.

Donc, cela fonctionnerait:

grid-template-rows: repeat(6, auto); 

revised demo

Le reste du problème est couvert en détail dans the other answer you cited.