Obtenir des colonnes pour les envelopper dans une Grille CSS

Comment pouvez-vous préciser le nombre maximal de colonnes lors de l'utilisation de display: grid;, avec automatiquement la rupture lorsque le contenu devient trop grande pour l'espace (ou plus petite que la taille minimale)? Est-il un moyen de le faire sans que les media queries?

Par exemple, j'ai le texte suivant qui ne cassera pas en une seule colonne, mode quand il n'y a pas assez de place pour le contenu.

CSS:

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

#grid > div {
  background-color: #ccddaa;
}

HTML:

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

InformationsquelleAutor Panda TG Attwood | 2017-04-27

26

Ni le HTML ou le CSS le concept de où les descendants d'un conteneur en plastique.

Essentiellement, le navigateur rend le document lors d'une première cascade. Il ne redistribue pas le document quand un enfant s'enroule.

Par conséquent, de modifier le nombre de colonnes, vous aurez besoin de fixer une limite de largeur de quelque part le long de la ligne ou de l'utilisation des media queries.

Voici une explication plus approfondie: Le récipient shrink-to-fit éléments enfants comme ils le wrap

Si vous pouvez définir la largeur d'une colonne, puis présentation de la grille de auto-fill fonction permet d'habillage facile.

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

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

#grid > div {
  background-color: #ccddaa;
}
```
HTML:
```
<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>
```
jsFiddle démo

Notes:

La auto-remplissage fonction permet à la grille pour aligner autant de tracés de grille (lignes ou colonnes) que possible sans faire déborder le récipient. Cela peut créer un comportement similaire à la flexion de la disposition de flex-wrap: wrap.

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

La fr unité représente une fraction de l'espace disponible. Il est semblable à flex-grow dans flex mise en page.
- Voici une autre variation: minmax(100px, 200px). Il est douloureusement évident aujourd'hui, mais vous n'avez pas pour pour utiliser fr unités pour le 2ème paramètre. Avant, j'était en train de tuer moi-même en essayant de travailler avec fr en pensant que c'était ce que le 2ème paramètre nécessaire car c'est ce que beaucoup de tutoriels et des exemples de code utiliser. Pour mon cas en particulier px, px a travaillé comme un charme.
InformationsquelleAutor Michael_B

Vous devez vous connecter pour publier un commentaire.