Faire une étendue d'élément de grille sur la dernière ligne / colonne

Question

Est-il possible de faire une grille de l'élément de durée de la première à la dernière ligne quand je ne sais pas le nombre de lignes?

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

Comment puis-je faire le tiers - .box durée de la première grille à la dernière ligne?

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

Answer 1

Est-il possible de faire une grille de l'élément de durée de la première à la dernière ligne quand je ne sais pas le nombre de lignes?

D'un naturel Grille de solution à ce problème semble être manquant dans la spec actuelle (Niveau 1). Donc, la réponse serait "non", strictement avec les propriétés de la Grille.

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

---

Tandis que la Grille CSS ne peut pas faire une zone de grille durée de toutes les colonnes / lignes dans un implicite de la grille, il peut faire le travail dans un explicite de la grille.

Utiliser des entiers négatifs.

Voici deux articles dans le CSS de la Grille de spécifications:

7.1. De Manière Explicite De La Grille

Indices numériques dans la grille de placement des propriétés de compter sur les bords de manière explicite de la grille. Positif indices comptent à partir de la page de depart, alors que des index négatifs compter à partir de la fin du côté.

et ici...

8.3. Basé sur la ligne de Placement: l' grid-row-start, grid-column-start, grid-row-end, et grid-column-end propriétés

Si un nombre entier négatif est donné, à la place des comtes dans le sens inverse, en commençant à partir du bord de la fin de l'explicite de la grille.

En d'autres termes, lorsque l'on traite explicitement de la grille, qui est une grille que vous définissez à l'aide de ces propriétés:

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

... vous pouvez faire une zone de grille durée de toutes les colonnes par la définition de cette règle:

grid-column: 3 / -1;

Qui indique la zone de la grille pour s'étendre à partir de la troisième colonne de la ligne de la dernière colonne de la ligne.

L'inverse serait:

grid-column: 1 / -3;

Encore une fois, cette méthode ne fonctionne qu'en explicite les grilles.

Answer 2

Vous pouvez ajouter grid-row-départ pour que les boîtes de css, et s'étendre sur un nombre ridiculement élevés.

.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 - Avertissement:

C'est une non-solution optimale et ne fonctionne pas dans tous les navigateurs, soyez prudent! Bien que cela puisse paraître, le travail dans certains navigateurs (Chrome), les autres navigateurs (Firefox) va créer l'absurde nombre de lignes qui provoque des problèmes.

Answer 3

Une solution qui a effectivement travaillé pour moi de mettre position: absolute; sur l'élément que vous souhaitez développer à la fin. Cela a ses inconvénients, mais pourrait être un épargnant de 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>

Answer 4

Donc, si il ne semble pas possible encore, vous pouvez opter pour l'évolution de la structure et de nid de la grille.

Utiliser JavaScript pour prendre la troisième zone, et de le placer en dehors de votre réseau d'origine conteneur, si vous n'êtes pas en mesure de 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>