Comment puis-je spécifier les hauteurs de ligne de Grille CSS de mise en page?

J'ai une Grille CSS de Mise en page dans laquelle je veux faire certains (moyenne 3) lignes étirer à leur taille maximale. Je suis probablement à la recherche d'un bien semblable à ce que flex-grow: 1 avec Flexbox, mais je n'arrive pas à trouver une solution.

Note: Ceci est prévu pour une Electron app seulement, donc la compatibilité du navigateur n'est pas vraiment un souci.

J'ai le code CSS suivant la Grille de Mise en page:

CSS:

.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;
}

HTML:

<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>

Qui crée la grille suivante:

Comment puis-je spécifier les hauteurs de ligne de Grille CSS de mise en page?


Quand aucune des cases contiennent tout le contenu que je voudrais la grille à ressembler à quelque chose comme ceci:

Comment puis-je spécifier les hauteurs de ligne de Grille CSS de mise en page?

  • Pourquoi ne voulez-vous pas utiliser flexbox? display: grid; a pire prise en charge du navigateur que display: flex;
  • J'aurais dit que c'est pour un Électron application uniquement dans la compatibilité du navigateur n'est pas vraiment un souci.
  • cool, pourquoi n'utilisez-vous pas flexbox?
  • L'Électron application que je suis en train de construire a 1 point de vue qui est de la grille, comme ci-dessus. Depuis c'est une grille, j'ai pensé qu'il serait amusant de jouer avec la nouvelle Grille CSS de Mise en page, puisque c'est (un peu) pris en charge dans l'électronique.
  • encore de nouvelles de grille CSS, fr unité est sympa, mais en effet l'auto a été la clé pour résoudre mon problème
  • vous n'êtes pas utile, ce n'est pas un débat. Si vous ne voulez pas répondre à l'OP de la question, puis il suffit de ne pas répondre.
  • Je suis en train de l'aider, et souvent les gens ne sont pas conscients des options ou d'autres ne savent pas ce qu'ils peuvent et ne peuvent pas utiliser. OP précisé et c'est tout.

InformationsquelleAutor Chris | 2017-01-29
  1. 35

    L'un des Related posts m'a donné la (simple) réponse.

    Apparemment le auto valeur 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);
}
    • Avez-vous vu la compatibilité du navigateur de cela? developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
    • Merci de regarder ma réponse, il a beaucoup plus de compatibilité du navigateur.
    • J'aurais dit que c'est pour un Électron application uniquement dans la compatibilité du navigateur n'est pas vraiment un souci.
    • En outre, le temps passe et maintenant, tous les principaux navigateurs supporte les CSS de la grille.
    InformationsquelleAutor Chris