web-dev-qa-db-fra.com

Ajustement automatique de la grille CSS avec contenu maximal

J'ai 4 colonnes. Le contenu réel des colonnes 1 et 4 est de 150 pixels, la colonne 2 de 250 pixels et la colonne 3 de 370 pixels. Je veux encapsuler les colonnes lorsque la largeur du navigateur change. Lorsque je diminue la largeur du navigateur, je veux que chaque colonne se rétrécisse à sa largeur la plus basse avant de se terminer. J'imagine donc que la 4e colonne tomberait à la ligne suivante avec une largeur de 100% après être tombée en dessous de 150 pixels de largeur.

Voici ce que je pensais avoir dû faire l'affaire:

repeat(auto-fit, minmax(max-content, 1fr))

Existe-t-il un moyen d'y parvenir sans dépasser une largeur fixe où se trouve "max-content"?

Voici ma solution à l'aide de requêtes multimédias et de largeurs fixes

https://jsfiddle.net/9hjb5qv8/

Voici le html/css que j'ai utilisé dans le violon ci-dessus:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
  grid-gap: 8px;
}

@media (max-width: 799px) {
  .container {
      grid-template-columns: minmax(max-content, 1fr);
  }
}

@media (min-width: 800px) {
  .container .p2,
  .container .p3 {
    grid-column: auto / span 2;
  }
}

.container > div {
  background-color: gray;
  text-align: center;
}
<div class="container">
  <div class="p1">
    <img src="https://via.placeholder.com/150x150">
  </div>
  <div class="p2">
    <img src="https://via.placeholder.com/250x150">
  </div>
  <div class="p3">
    <img src="https://via.placeholder.com/370x150">
  </div>
  <div class="p4">
    <img src="https://via.placeholder.com/150x150">
  </div>
</div>
csscss-grid
10
Hectooorr

J'avais une question similaire en jouant avec la grille:

grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr))

Si nous jetons un œil à la documentation, nous pouvons voir que la commande minmax est valide: https://developer.mozilla.org/en-US/docs/Web/CSS/minmax

Mais dans une documentation répétée sur csswg, il énonce une règle simple qui interdit tout cela de se produire; https://drafts.csswg.org/css-grid/#funcdef-repeat

La forme générique de la syntaxe repeat () est, approximativement,

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

Le premier argument spécifie le nombre de répétitions. Le deuxième argument est une liste de pistes, qui est répétée ce nombre de fois.

Cependant, il existe certaines restrictions :

  • La notation repeat () ne peut pas être imbriquée.

  • Les répétitions automatiques (remplissage automatique ou ajustement automatique) ne peuvent pas être combinées avec des tailles intrinsèques ou flexibles .

Quelle est une taille intrinsèque ou flexible?

  • Une fonction de dimensionnement intrinsèque (min-content, max-content, auto, fit-content()).

Ainsi, la commande ne fonctionnera pas dans la grille car chaque colonne/ligne aura des tailles différentes et l'habillage ne pourra pas avoir lieu. Voir l'image ci-dessous comme exemple.

minmax max-content auto-fit

Ce comportement doit être exécuté à l'aide de flex-box à la place.

13
Kivylius