Taille des cellules (grid item / cells)

WHAT IS IT ??

• les cellules d'une grille ont des dimensions définies via :
  1. grid-template-columns et/ou grid-template-rows et
  2. la taille du conteneur width et height
• si le contenu de la cellule : image / texte avec plein de caractères sans espace ... , sont plus grands, ils débordent
• il est possible de déterminer la taille des cellules directement dans les cellules via span nbTrack
• étendre une cellule sur plusieurs rangées de type colonne grid-column : span nbTrack;
• étendre une cellule sur plusieurs rangées de type ligne grid-row : span nbTrack;

---

• il est possible de définir les dimensions et la position de chaque cellule d'une grille grâce à grid-column et grid-row
• grid-column est le raccourci de grid-column-start et grid-column-end
• grid-row est le raccourci de grid-row-start et grid-row-end
• grid-column:span 3 est le raccourci de grid-column-start : span 3 et grid-column-end : auto
• L'autre notation est grid-column:trackStartNumber / trackEndNumber
• 3 cas possibles :
  1. s'il y a suffisamment de place dans la rangée, se met à la suite
  2. s'il n'y a pas suffisamment de place dans la rangée, passe à la ligne suivante
  3. si le nombre de rangée dans la ligne suivante ne suffit pas, crée des colonnes implicites dans la grille