Ordre des blocs placés automatiquement : grid;

Utilisons  le simulateur et appliquons le style suivant :

.conteneur {
  display : grid;
  grid-template-columns: repeat(2, 100px);
  grid-auto-rows: 100px;
}
#it1 {
   grid-column: 2;
   grid-row: 1;
}

Nous allons tenter de comprendre l'algorithme utilisé pour placer les blocs.

Tout d'abord, les blocs "fixes" sont placés. On appelle bloc fixe un bloc qui à son emplacement défini en ligne et en colonne.
Dans notre exemple seul, le bloc rouge est un bloc fixe ; sa colonne et ligne sont définies.


Une fois que les blocs fixes sont placés, les autres éléments sont placés automatiquement dans l'ordre du DOM (défini dans le HTML).

Dans notre exemple :

Les blocs bleu, vert et gris sont placés dans cet ordre.

Remarque : le bloc bleu défini après le bloc rouge se retrouve placé avant lui.



Pour les blocs "fixes", il peut y avoir intersection des zones. Les blocs se recouvrent dans l'ordre de leur position dans le DOM, voir Intersection.

Cas des blocs définis sur la dimension définie par le flow.

Examinons ce cas



#it1 { 
   grid-row : 2;
   grid-column : 2/3;
}

#it2 {
   grid-column : span 2;
}

#it3 {
  grid-row : 1;
}

Priorité des blocs :

  1. Le bloc 1 est traité en priorité (bloc fixe). 
  2. Pour grid-auto-flow: row; nous recherchons des blocs qui ont l'attribut grid-row déclaré. Le bloc 3 est traité
  3. Les blocs restants sont traités par ordre du flux.
autre exemple


Cas des blocs définis uniquement sur une dimension.



Voici un Autre cas

exemple avec grid-column-end

.conteneur {
  display : grid;
  grid-template-columns: repeat(2, 100px);
  grid-auto-rows: 100px;
  grid-gap: 10px;
}

#it1 {
   grid-column: 2;
   grid-row: 1 / 2;
}

#it2 {
  grid-column-end: span 2;         
}

Comme précédemment le bloc rouge est placé en priorité, ensuite le bloc bleu cherche une place où il peut se placer sans "toucher" les blocs fixes. Exemple


Les blocs vert et gris seront placés à la suite avec les mêmes conditions en respectant entre eux les précédences du DOM. Ils ne peuvent "dépasser" le bloc bleu.




Pour remplir les trous vides  grid-auto-flow: dense; fait des merveilles


Libellés :