web-dev-qa-db-fra.com

Comment spécifier les hauteurs de ligne dans la disposition CSS Grid?

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:

Current Grid




Si aucune case ne contient de contenu, j'aimerais que la grille ressemble à ceci:

Preferred Grid

htmlcssgrid-layoutcss-grid
24
Chris

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);
}
41
Chris