web-dev-qa-db-fra.com

CSS Grid a-t-il une fonction flex-grow?

Existe-t-il un analogue de flex-grow pour la propriété grille ?

J'aimerais que mes zones de grille tiennent compte du contenu qu'elles reçoivent, mais que certaines zones occupent plus de place que d'autres comme flex-grow pour flex.

Pratiquement, dans l'exemple ci-dessous, j'aimerais

  • le turquoise pour être invisible car il accueille son contenu.
  • Le footer doit également être invisible car il n'a pas de contenu.
  • La section du milieu prend le reste de la page comme flex-grow.

Plus concrètement, j'aimerais ce code:

.ctnr {
  display: grid;
  min-height: 100vh;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
}

.test {
  background: black;
  height: 1rem;
}

header {
  grid-area: header;
  background: turquoise;
}

nav {
  grid-area: nav;
  background: grey;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
  background: yellow
}
<div class="ctnr">
  <header>
    <div class="test"></div>
  </header>
  <nav></nav>
  <main></main>
  <footer></footer>
</div>

Pour agir comme ce code:

.ctnr {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.panel {
  flex-grow: 1;
  display: flex;
}

header {
  flex-grow: 0;
  background: turquoise;
}

nav {
  min-width: 10rem;
  background: grey
}

footer {
  background: yellow
}
<div class="ctnr">
  <header>hey</header>
  <div class="panel">
    <nav></nav>
    <main></main>
  </div>
  <footer></footer>
</div>

Sans le div.panel et sans ajouter de balise supplémentaire.

La raison pour laquelle je voudrais faire cela, est légitime, cet élément supplémentaire div me dérange.

htmlcsscss3css-grid
14
Ced

CSS Grid propose l'unité fr, qui fonctionne de manière similaire à flex-grow.

Alors que flex-grow répartit l'espace libre dans le conteneur entre les éléments flexibles, l'unité fr répartit l'espace libre dans le conteneur entre les lignes/colonnes.

D'après les spécifications:

7.2.3. Longueurs flexibles: l'unité fr

Une longueur flexible ou <flex> est une dimension avec l'unité fr, qui représente une fraction de l'espace libre dans le conteneur de la grille.

(Notez que flex-grow est appliqué à éléments flexibles, tandis que fr les longueurs sont appliquées à conteneurs de grille.)

Donc, dans votre grille, vous avez trois lignes:

  1. La première ligne est l'en-tête. Vous souhaitez que le contenu définisse sa hauteur. Sa hauteur est donc définie sur auto.

  2. La dernière ligne est le pied de page. Vous souhaitez que le contenu définisse sa hauteur. Sa hauteur est donc définie sur auto.

  3. La ligne du milieu contient les éléments nav et main. Vous voulez que cette ligne occupe tout l'espace vertical restant. Sa hauteur est donc définie sur 1fr.

.ctnr {
  display: grid;
  grid-template-rows: auto 1fr auto;  /* key rule */
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  grid-template-areas: "header header" 
                         "nav main" 
                       "footer footer";
}

header {
  grid-area: header;
  background: turquoise;
}

nav {
  grid-area: nav;
  background: grey;
}

main {
  grid-area: main;
  background: orange;
}

footer {
  grid-area: footer;
  background: yellow;
}

body {
  margin: 0;
}
<div class="ctnr">
  <header>header</header>
  <nav>nav</nav>
  <main>main</main>
  <footer>footer</footer>
</div>

démo jsFiddle

18
Michael_B