CSS layout
Grid
Playground
Récapitulatif des concepts
Modèle grille : bi-dimensionnel
Conteneur de grille
Pistes (Tracks)
Colonne (column)
Rangée (ligne) (row)
Grille explicite
Grille implicite
Placement automatique
Piste flexible (fr)
Liste de pistes (repeat())
Dimension de piste (minmax())
Positionnement d’élements sur la grille
Cellule
Zone
Gouttières
Grilles imbriquées
Sous-grille
Chevauchement (sans z-index)
z-index
Devtools
récapitulatif
Concepts
Récapitulatif des propriétés
display: grid | inline-grid
Grille explicite
grid-template-rows
grid-template-columns
grid-template-areas
auto-fit
auto-fill
grid-auto-flow grid-auto-columns
place-items align-items
grid-column
grid-column-start
grid-column-end
grid-row
grid-row-start
grid-row-end
gap
z-index
fr
repeat()
repeat()
minmax()
récapitulatif des motifs communs
Grille + média query (grilles différentes selon la taille du terminal)
Grille pour un petit composant (
grid-template-area)Disposition adaptative 1 à 3 colonnes
Disposition flexible 12 colonnes
Mise en page réactive (responsive) avec media queries
Boite de dialogue (pour éviter d’utiliser le positionnement)
Idées de cas d’utilisation
Mise en page d’une page web
Tableur
Tier list
Liste de produits / Cartes dans un e-commerce
Gallerie photos
Lecteur vidéo avec suggestions
Mise en page de RPG