web-dev-qa-db-fra.com

CSS Grid wrapping?

Est-il possible de faire un saut de grille CSS sans utiliser de requêtes multimédia?

Dans mon cas, je souhaite placer un nombre non déterministe d'éléments dans une grille et je souhaite que cette grille soit bouclée. En utilisant flexbox, je ne parviens pas à bien espacer les choses de manière fiable. J'aimerais aussi éviter beaucoup de questions des médias.

Voici un exemple de code :

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-columns: 186px 186px 186px 186px;
}

.grid > * {
  background-color: green;
  height: 200px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Et voici un gif:

 gif of what I'm seeing

En passant, si quelqu'un peut me dire comment je pourrais éviter de spécifier la largeur de tous les éléments comme je suis avec grid-template-columns, ce serait formidable. Je préférerais que les enfants spécifient leur propre largeur.

htmlcsscss3css-grid
57
kentcdodds

Utilisez soit auto-fill ou auto-fit comme numéro de répétition de la notation repeat() .

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

auto-fill

Lorsque auto-fill est donné comme numéro de répétition, si la grille Le conteneur a une taille définie ou une taille maximale dans l’axe concerné, puis le nombre de répétitions est le plus grand entier positif possible cela ne provoque pas le débordement de la grille dans son conteneur de grille.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

La grille répétera autant de pistes que possible sans faire déborder son conteneur. 

 Using auto-fill as the repetition number of the repeat() notation

Dans ce cas, étant donné l'exemple ci-dessus (voir image), seules 5 pistes peuvent contenir le conteneur de grille sans déborder. Notre grille ne contient que 4 éléments, donc un cinquième est créé sous forme de piste vide dans l'espace restant.

Le reste de l’espace restant, piste 6, termine la grille explicite. Cela signifie qu'il n'y avait pas assez d'espace pour placer une autre piste.

auto-fit

Le mot clé auto-fit se comporte de la même manière que auto-fill, sauf qu'après l'algorithme de placement d'élément de grille toutes les pistes vides dans l'espace restant seront réduites à 0.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

La grille répétera toujours autant de pistes que possible sans surcharger son conteneur, mais les pistes vides seront réduites à 0.

Une piste réduite est traitée comme ayant une fonction de dimensionnement de piste fixe de 0px.

 Using auto-fit as the repetition number of the repeat() notation

Contrairement à l'exemple d'image auto-fill, la cinquième piste vide est réduite, ce qui met fin à la grille explicite juste après le quatrième élément.

auto-fill vs auto-fit

La différence entre les deux est perceptible lorsque la fonction minmax() est utilisée.

Utilisez minmax(186px, 1fr) pour classer les éléments de 186px à 186px, plus une fraction de l'espace restant dans le conteneur de la grille.

Lorsque vous utilisez auto-fill, les éléments grossiront s’il n’ya plus d’espace pour placer des pistes vides.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}

.grid>* {
  background-color: green;
  height: 200px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Lors de l'utilisation de auto-fit, les éléments s'agrandiront pour occuper l'espace restant car toutes les pistes vides sont réduites en 0px.

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

.grid>* {
  background-color: green;
  height: 200px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Cour de récréation:

CodePen

Inspection des pistes à remplissage automatique

 auto-fill

Inspection des pistes ajustées automatiquement

 auto-fit

93
Ricky

Vous voulez soit auto-fit ou auto-fill dans la fonction repeat():

grid-template-columns: repeat(auto-fit, 186px);

La différence entre les deux devient évidente si vous utilisez également une minmax() pour permettre des tailles de colonne flexibles:

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

Cela permet à vos colonnes de varier en taille, allant de 186px à des colonnes d'égale largeur s'étendant sur toute la largeur du conteneur. auto-fill créera autant de colonnes que possible dans la largeur. Si, par exemple, cinq colonnes correspondent, même si vous n’avez que quatre éléments de grille, il y aura une cinquième colonne vide:

 enter image description here

Utiliser auto-fit à la place empêchera les colonnes vides, étirant les vôtres si nécessaire:

 enter image description here

13
keithjgrant

cherchez-vous auto-fill? 

grid-template-columns: repeat(auto-fill, 186px);

Démo: http://codepen.io/alanbuchanan/pen/wJRMox

Pour utiliser plus efficacement l'espace disponible, vous pouvez utiliser minmax et transmettre auto comme deuxième argument:

grid-template-columns: repeat(auto-fill, minmax(186px, auto));

Démo: http://codepen.io/alanbuchanan/pen/jBXWLR

Si vous ne voulez pas les colonnes vides, vous pouvez utiliser auto-fit au lieu de auto-fill.

6
alanbuchanan

J'ai eu une situation similaire. En plus de ce que vous avez fait, je souhaitais centrer mes colonnes dans le conteneur tout en ne leur laissant pas les colonnes vides à gauche ou à droite:

.grid { 
    display: grid;
    grid-gap: 10px;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}
1
farrellw