web-dev-qa-db-fra.com

Faire en sorte qu'une colonne de grille s'étende sur toute la ligne

Imaginez que nous ayons 2 conteneurs de grille CSS avec des colonnes dynamiques comptées en fonction de la largeur .

display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

La grille fonctionne parfaitement, mais que se passe-t-il si nous devons avoir une autre grille pour que la 1ère colonne soit la même que dans une autre grille avec le code ci-dessus, mais c'est une autre colonne pour s'étendre sur plus de cellules - en fonction du nombre de cellules dans la ligne actuelle.

Pour mieux comprendre le problème, il existe des images:

TargetDesign

Sur un emballage plus étroit:

TargetDesign2

Nous aurions besoin d'appliquer quelque chose comme grid-column: span ALL (si quelque chose comme ça existe), ce qui signifie que ALL = jusqu'à la fin de la ligne actuelle.

Ce qui est vraiment important, c'est que la "première" colonne doit toujours s'aligner sur la colonne "1".

Le code pour exécuter l'exemple est ici:

.grid div {
  /* Not important fancy styles */
  height: 40px;
  text-align: center;
  padding-top: 20px;
}

.grid {
  width: 350px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  background-color: silver;
}

.grid-second {
  background-color: red;
}

.grid-another {
  background-color: purple;
  border: 1px solid gray;
}
<div class="grid">
  <div class="grid-first">
    First
  </div>
  <div class="grid-second">
    Second (Want till end)
  </div>
</div>
<!-- Another same grid -->
<div class="grid">
  <div class="grid-another">
    1
  </div>
  <div class="grid-another">
    2
  </div>
  <div class="grid-another">
    3
  </div>
  <div class="grid-another">
    4
  </div>
</div>

PS. s'il vous plaît ne pas publier des solutions en utilisant la requête multimédia. Je suis intéressé par n'importe quelle (même petite solution hacky), qui fonctionnera sans utilisation de requêtes multimédias.

csscss3gridcss-grid
12
Jurosh

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

7.1. La grille explicite

Les index numériques dans les propriétés de placement de grille comptent à partir des bords de la grille explicite. Les indices positifs comptent du côté initial, tandis que les indices négatifs comptent du côté final.

ici aussi...

8.3. Placement en ligne: le grid-row-start, grid-column-start, grid-row-end, et grid-column-end propriétés

Si un entier négatif est donné, il compte à la place en sens inverse, à partir du bord de fin de la grille explicite.

En d'autres termes, lorsqu'il s'agit d'une grille explicite , ce qui signifie une grille définie par ces propriétés:

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid (qui est le raccourci pour les trois propriétés ci-dessus, entre autres )

... vous pouvez faire en sorte qu'une zone de grille couvre toutes les colonnes en définissant cette règle:

grid-column: 1 / -1;

Cela indique que la zone de la grille s'étend de la première ligne de colonne à la dernière ligne de colonne, ce qui, je crois, répond à votre objectif déclaré:

"Nous aurions besoin d'appliquer quelque chose comme grid-column: span ALL (si quelque chose comme ça existe), ce qui signifie que ALL = jusqu'à la fin de la ligne actuelle. "

démo jsFiddle

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  background-color: silver;
}

.grid-second {
  grid-column: 2 / -1;
  background-color: red;
}


/* Not important fancy styles */

.grid div {
  height: 40px;
  text-align: center;
  padding-top: 20px;
}

.grid-another {
  background-color: purple;
  border: 1px solid gray;
}
<div class="grid">
  <div class="grid-first">First</div>
  <div class="grid-second">Second (Want till end)</div>
</div>
<!-- Another same grid -->
<div class="grid">
  <div class="grid-another">1</div>
  <div class="grid-another">2</div>
  <div class="grid-another">3</div>
  <div class="grid-another">4</div>
  <div class="grid-another">1</div>
  <div class="grid-another">2</div>
  <div class="grid-another">3</div>
  <div class="grid-another">4</div>
  <div class="grid-another">1</div>
  <div class="grid-another">2</div>
  <div class="grid-another">3</div>
  <div class="grid-another">4</div>
</div>
24
Michael_B