Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété grid-auto-flow

Description de la propriété grid-auto-flow.

grid-auto-flow définit comment les éléments se placent dans la grille lorsque leur position n'est pas explicitement définie par gird-row et gird-column.

Si les éléments se placent ligne par ligne, le nombre de colonnes de la grille doit être défini (voir grid-template-columns. A l'inverse, si les éléments se positionnent colonnes par colonnes, c'est le nombre de lignes qui doit être fixé (voir grid-template-rows).

Pour une présentation générale des possibilités des grilles, consultez la page sur la propriété grid.

Syntaxes pour grid-auto-flow.

  • grid-auto-flow: row;

    Valeur par défaut.
    Les éléments se placent les uns à la suite des autres en replissant la grille ligne par ligne.

  • grid-auto-flow: column;

    Les éléments se placent les uns à la suite des autres en replissant la grille par colonnes.

  • grid-auto-flow: row dense; grid-auto-flow: dense;

    Ces deux syntaxes sont synonymes.
    Les éléments se placent lignes par lignes, en complétant les trous éventuels.

    Des trous peuvent se former lorsque certains éléments s'étendent sur plusieurs cellules. Il se peut alors que la place restante sur la ligne ne permettent pas de les positionner à la suite des éléments précédents. Il se peut aussi que d'autres éléments soient figés à une certaine position (ligne et colonne définies) ; la place qu'ils laissent entre eux ne permet pas forcément de placer tous les éléments dans l'ordre.

    Exemple 1 : formation de trous dans la grille à cause d'éléments étendus.

    L'élément numéro 4 de la grille ci-dessous est étendu sur deux colonnes (span 2). Il ne peut donc pas se positionner dans la place restante sur la première ligne. Il est rejeté en deuxième ligne en laissant un trou à la fin de la première ligne.

    Exemple pour la propriété grid-auto-flow

    La grille ci-dessous est la même mais avec la propriété grid-auto-flow:dense;. Le trou laissé par l'élément numéro 4 en bout de ligne est bouché par le premier élément capable d'y entrer (le numéro 5). L'ordre des éléments est donc altéré.

    Exemple pour la propriété grid-auto-flow

     

    Exemple 2 : formation de trous dans la grille à cause d'éléments fixés.

    Dans ce deuxième exemple, l'élément numéro 3 (en bleu) a été fixé en colonne 4 (grid-column:4) Si la grille n'est pas "dense", l'élément suivant se positionne après lui, laissant un trou sur la première ligne.

    Exemple d'une grille avec trous (élément étendus)

    Si la grille est "dense", le quatrième élément se positionne avant le troisième pour ne pas laisser de trou. Là aussi l'ordre des éléments est altéré.

    Exemple d'une grille avec trous (éléments fixés)

  • grid-auto-flow: column dense;

    Les éléments se placent colonnes par colonnes, en complétant les trous éventuels. Voir les explications ci-dessus au sujet de la formation des trous.

  • grid-auto-flow: initial;

    La valeur initiale est row.

  • grid-auto-flow: unset; grid-auto-flow: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Les deux éléments bleus sont positionnés de façon explicite avec les propriétés grid-row et grid-column. De plus l'élément "Avril" est étendu sur deux colonnes. Les autres éléments sont mobiles et n'occupent chacun qu'une seule cellule. Voyez comment ils se disposent autour des éléments fixes, en fonction de la valeur choisie pour la propriété grid-auto-flow.

grid-auto-flow :
Janvier
Février (fixé)
Mars (fixé)
Avril
Mai
Juin
Juillet
Août
Septembre
Octobre
Novembre
Décembre

Prise en charge par les navigateurs (compatibilité).

La prise en charge des grilles est globalement assez bonne, sauf pour Internet explorer qui traite les propriétés relatives aux grilles de façon différente. Reportez-vous à la page sur la propriété grid pour une description plus détaillée des problèmes de compatibilité avec Internet Explorer.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Grilles - Propriétés.

  • align-content : Disposition des lignes dans un flex-box ou une grille.
  • align-items : Disposition verticale des éléments dans un flex-box ou une grille.
  • align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
  • grid : Propriété raccourcis définissant les principaux paramètres d'une grille.
  • grid-area : Positionne un élément dans une zone nommée de la grille.
  • grid-auto-columns : Mode de calcul des colonnes 'auto' dans une grille.
  • grid-auto-rows : Mode de calcul de la hauteur 'auto' des lignes dans une grille.
  • grid-column : Numéro de colonne(s) d'un élément dans une grille.
  • grid-column-end : Numéro de la colonne de fin d'un élément dans une grille.
  • grid-column-gap : Ajuste l'espacement des colonnes dans une grille.
  • grid-column-start : Numéro de la colonne de début d'un élément dans une grille.
  • grid-gap : Ajuste l'espacement des lignes et des colonnes dans une grille.
  • grid-row : Numéro des lignes d'un élément dans une grille.
  • grid-row-end : Numéro de la ligne de fin d'un élément dans une grille.
  • grid-row-gap : Ajuste l'espacement des lignes dans une grille.
  • grid-row-start : Numéro de la ligne de départ d'un élément dans une grille.
  • grid-template : Largeur des colonnes et hauteur des lignes d'une grille.
  • grid-template-areas : Définition de zones nommées dans une grille
  • grid-template-columns : Définition du nombre et de la largeur des colonnes d'une grille.
  • grid-template-rows : Définition du nombre et de la hauteur des lignes d'une grille.
  • justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
  • justify-items : Gère l'alignement horizontal des éléments dans le container flex-box ou grille.
  • justify-self : Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.

Grilles - Fonctions.

  • minmax() : Renvoie une valeur comprise dans une fourchette.
  • repeat() : Répète une valeur un certain nombre de fois.