web-dev-qa-db-fra.com

Faire un élément de grille s'étendre à la dernière ligne/colonne

Est-il possible de créer un élément de grille s'étendant de la première à la dernière ligne si je ne connais pas le nombre de lignes?

Disons que j'ai le code HTML suivant avec un nombre inconnu de boîtes.

Comment créer le troisième .box de la première à la dernière ligne de la grille? 

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

.box {
  background-color: blue;
  padding: 20px;
  border: 1px solid red;
}

.box:nth-child(3) {
  background-color: yellow;
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">3</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>

htmlcsscss3css-grid
20
jbe

Vous pouvez ajouter grid-row-start à css, et le configurer pour couvrir un nombre absurdement élevé.

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%; 
  grid-template-rows: auto [last-line];
}

.box {
  background-color: blue;
  padding: 20px;
  border: 1px solid red;
}

.box:nth-child(3) {
  background-color: yellow;
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
  grid-row-start: span 9000;
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">3</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>

Edit - Disclaimer:

Ceci est une solution non optimale et ne fonctionne pas dans tous les navigateurs, soyez prudent! Bien que cela puisse sembler fonctionner dans certains navigateurs (Chrome), d'autres navigateurs (Firefox) créeront un nombre de lignes absurde qui poserait des problèmes.

11
Hodrobond

Est-il possible de créer un élément de grille s'étendant de la première à la dernière ligne si je ne connais pas le nombre de lignes?

Une solution de grille naturelle à ce problème semble manquer dans la spécification actuelle (niveau 1). La réponse serait donc "non", strictement avec les propriétés de la grille.

Cependant, comme indiqué dans cette réponse , cela peut être possible avec un positionnement absolu.

Alors que CSS Grid ne peut pas faire en sorte qu'une zone de grille recouvre toutes les colonnes/lignes d'un grille implicite, elle peut effectuer le travail dans un grille explicite.

Utilisez des entiers négatifs.

Voici deux sections intéressantes dans la spécification CSS Grid:

7.1. La grille explicite

Les index numériques dans les propriétés de placement de grille sont calculés à partir des bords de la grille explicite. Les index positifs comptent depuis le début, tandis que les indices négatifs comptent à partir de la fin.

et ici...

8.3. Emplacement basé sur les lignes: propriétés grid-row-start, grid-column-start, grid-row-end et grid-column-end

Si un entier négatif est donné, il compte à l'inverse en commençant par à partir de l'extrémité Edge de la grille explicite.

En d'autres termes, lorsque vous utilisez une grille explicite, vous définissez une grille à l'aide de ces propriétés:

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas

... vous pouvez créer une zone de grille couvrant toutes les colonnes en définissant cette règle:

grid-column: 3 / -1;

Cela indique à la grille de s’étendre de la troisième ligne de colonne à la dernière ligne de colonne.

L'inverse serait:

grid-column: 1 / -3;

Encore une fois, cette méthode ne fonctionne que dans des grilles explicites. 

7
Michael_B

Une solution qui a fonctionné pour moi en définissant position: absolute; sur l'élément que vous souhaitez développer. Cela aura des inconvénients, mais pourrait sauver la vie dans certains cas. Voici un exemple complet:

.grid {
  display: grid;
  grid-template: auto / auto 22px auto;
  position: relative;
}

.vline {
  position: absolute;
  height: 100%;
  width: 2px;
  background-color: black;
  grid-column: 2 / span 1;
  margin: 0 10px;
}

.grid h1:nth-child(1) { grid-row: 1; grid-column: 1; text-align: right; }
.grid p:nth-child(2) { grid-row: 2; grid-column: 1; text-align: right; }
.grid h1:nth-child(3) { grid-row: 3; grid-column: 3; }
.grid p:nth-child(4) { grid-row: 4; grid-column: 3; }
.grid h1:nth-child(5) { grid-row: 5; grid-column: 1; text-align: right; }
.grid p:nth-child(6) { grid-row: 6; grid-column: 1; text-align: right; }
.grid h1:nth-child(7) { grid-row: 7; grid-column: 3; }
.grid p:nth-child(8) { grid-row: 8; grid-column: 3; }
p, h1 { margin: 0; padding: 0; }
<div class="grid">
  <h1>1.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <h1>2.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <h1>3.</h1>
  <p>In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <h1>4.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <div class="vline"></div>
</div>

2
Fanus du Toit

Donc, si cela ne semble pas encore possible, vous pouvez opter pour une modification de la structure et imbriquer la grille. 

Utilisez JavaScript pour extraire la troisième boîte et placez-la à côté de votre conteneur de grille d'origine, si vous ne pouvez pas le faire à l'avance. 

.container {
    display: grid;
    grid-template-columns: 65% 35%;
}

.nested_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    grid-template-rows: auto;
}

.box {
    background-color: blue;
    padding-bottom: 20px;
    border: 1px solid red;
}

.side {
    background-color: yellow;
    grid-column: 1 -1;
    border: 1px solid red;
}
<div class="container">
    <div class="nested_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>
    <div class="side">3</div>
</div>
<p><a href="gridbyexample.com">gridbyexample.com</a></p>

0
Duck