J'ai une structure de grille CSS dans laquelle je veux faire quelques (3 lignes du milieu) s'étirer à leur taille maximale. Je suis probablement à la recherche d'une propriété similaire à celle utilisée par flex-grow: 1
Avec Flexbox), mais je n'arrive pas à trouver de solution.
Remarque: Ceci est destiné uniquement à une application Electron , la compatibilité du navigateur ne pose donc pas vraiment problème.
J'ai la disposition de grille CSS suivante:
.grid {
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
grid-gap: 10px;
height: calc(100vh - 10px);
}
.grid .box {
background-color: grey;
}
.grid .box:first-child,
.grid .box:last-child {
grid-column-start: 1;
grid-column-end: -1;
}
/* These rows should 'grow' to the max height available. */
.grid .box:nth-child(n+5):nth-child(-n+7) {
grid-column-start: 1;
grid-column-end: -1;
}
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Ce qui crée la grille suivante:
Si aucune case ne contient de contenu, j'aimerais que la grille ressemble à ceci:
L'un des Related posts m'a donné la réponse (simple).
Apparemment, la valeur auto
sur le grid-template-rows
_ propriété fait exactement ce que je cherchais.
.grid {
display:grid;
grid-template-columns: 1fr 1.5fr 1fr;
grid-template-rows: auto auto 1fr 1fr 1fr auto auto;
grid-gap:10px;
height: calc(100vh - 10px);
}