web-dev-qa-db-fra.com

Récupération des colonnes dans CSS Grid

Comment pouvez-vous spécifier le nombre maximal de colonnes lors de l'utilisation de display: grid;, avec une rupture automatique lorsque le contenu devient trop large pour l'espace (ou plus petit qu'une taille minimale)? Existe-t-il un moyen de le faire sans interrogation des médias?

Par exemple, j'ai les éléments suivants qui ne se diviseront pas en mode colonne unique lorsqu'il n'y a pas assez de place pour le contenu.

#grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
}

#grid > div {
  background-color: #ccddaa;
}
<div id="grid">
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
</div>
csscss-grid
14
Panda TG Attwood

Ni HTML ni CSS n'ont la moindre idée du moment où les descendants d'un habillage de conteneur.

Essentiellement, le navigateur affiche le document lors d'une cascade initiale. Il ne redistribue pas le document lorsqu'un enfant s'enroule.

Par conséquent, pour modifier le nombre de colonnes, vous devrez définir une limite de largeur quelque part le long de la ligne ou utiliser des requêtes multimédias.

Voici une explication plus approfondie: Faire en sorte que le conteneur rétrécisse pour s'adapter aux éléments enfants lors de leur enroulement

Si vous pouvez définir une largeur de colonne, la fonction auto-fill De la disposition de la grille facilite l'encapsulation.

Dans cet exemple, le nombre de colonnes est entièrement basé sur la largeur de l'écran:

#grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* see notes below */
  grid-gap: 1em;
}

#grid > div {
  background-color: #ccddaa;
}
<div id="grid">
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
</div>

Démo jsFiddle

Remarques:

La fonction auto-fill permet à la grille d'aligner autant de pistes de grille (colonnes ou lignes) que possible sans déborder le récipient. Cela peut créer un comportement similaire au flex-wrap: wrap De la mise en page flexible.

La fonction minmax() vous permet de définir une plage de taille minimale et maximale pour une piste de grille. Dans le code ci-dessus, la largeur des pistes de colonne sera au minimum de 100 pixels et au maximum de l'espace libre disponible.

L'unité fr représente une fraction de l'espace disponible. Il est similaire à flex-grow Dans la mise en page flexible.

31
Michael_B