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 :

grid-auto-flow - Propriété CSS

grid-auto-flow

Résumé des caractéristiques de la propriété grid-auto-flow

Description rapide
Mode de calcul de l'emplacement des éléments dans la grille.
Statut
Standard
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
row | column | dense
Pourcentages
Ne s'appliquent pas.
Valeur initiale
row
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété grid-auto-flow passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Mise en page par grille
Références (W3C)
 🡇  
 🡅  
Statut du document:: CRD (document proposé pour la recommandation)

Statut du document:: CRD (document proposé pour la recommandation)

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

grid-auto-flow définit comment les éléments se positionnent dans la grille lorsque leur emplacement n'est pas explicitement définie par grid-row et grid-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.

Syntaxe de grid-auto-flowSchéma syntaxique de la propriété CSS grid-auto-flow row row column column dense densegrid-auto-flow:;grid-auto-flow:;
  • grid-auto-flow: row;

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

  • grid-auto-flow: column;

    Les éléments se placent les uns à la suite des autres en remplissant 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; grid-auto-flow: inherit; grid-auto-flow: revert; grid-auto-flow: revert-layer; grid-auto-flow: unset;

    La valeur initiale est : row.

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

grid-auto-flow est tout à fait le genre de propriété qui ne gagne pas grand chose à être animée. D'autant plus que, dans un cas plus complexe que notre petit exemple, l'animation peut nécessiter des calculs assez lourds.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Simulateur.

L'élément "Mars", en bleu, est étendu sur deux lignes et trois colonnes, ce qui l'empêche de se placer juste après février (il ne reste que deux colonnes alors qu'il en occupe trois). L'emplacement des autres éléments n'est pas figé et chacun d'eux n'occupe qu'une seule cellule. Voyez comment ils se disposent autour de l'élément contraint, en fonction de la valeur choisie pour la propriété grid-auto-flow.

grid-auto-flow :
Janvier
Février (fixé)
Mars
(élément étendu sur 2 lignes et 3 colonnes)
Avril
Mai
Juin
Juillet
Août
Septembre
Octobre
Novembre
Décembre

Prise en charge par les navigateurs (compatibilité).

La prise en charge de la propriété grid-auto-flow est globalement bonne.
Sauf pour l'ancien navigateur 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.

1
grid-auto-flow
Estimation de la prise en charge en pourcentage du parc actuel.
93%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que grid-auto-flow.

Les spécifications CSS éditées par le W3C sont organisées en modules. grid-auto-flow fait partie du Module CSS - Mise en page par grille (CSS Grid Layout Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Propriété raccourcis définissant les principaux paramètres d'une grille.
Positionne un élément dans une zone nommée de la grille.
Mode de calcul des colonnes 'auto' dans une grille.
Mode de calcul de la hauteur 'auto' des lignes dans une grille.
Numéro de colonne(s) d'un élément dans une grille.
Numéro de la colonne de fin d'un élément dans une grille.
Numéro de la colonne de début d'un élément dans une grille.
Numéro des lignes d'un élément dans une grille.
Numéro de la ligne de fin d'un élément dans une grille.
Numéro de la ligne de départ d'un élément dans une grille.
Largeur des colonnes et hauteur des lignes d'une grille.
Définition de zones nommées dans une grille
Définition du nombre et de la largeur des colonnes d'une grille.
Définition du nombre et de la hauteur des lignes d'une grille.

Fonctions.

Renvoie une valeur comprise dans une fourchette.
Répète une valeur un certain nombre de fois.