SS Boîte à outils

Toutes les données sont traitées localement

Démonstration CSS Grid Align & Justify

Visualisez les limites des cellules de grille pour voir clairement comment les éléments enfants se positionnent dans chaque cellule

Panneau de Contrôle

Ajustez quatre propriétés d'alignement pour observer différents niveaux d'effets d'alignement

Align Items

Alignement vertical dans les cellules

Justify Items

Alignement horizontal dans les cellules

Align Content

Alignement vertical de toute la grille

Justify Content

Alignement horizontal de toute la grille

Paramètres actuels: align-items: center | justify-items: center | align-content: center | justify-content: center

Zone de Démonstration de Grille

Grille 3x3 avec espace de conteneur supplémentaire pour démontrer les effets d'alignement de contenu

A

B

C

D

E

F

G

H

I

Explications des Propriétés

Propriétés Items (Alignement dans les cellules)

Align Items (Vertical)

start - Aligner les éléments enfants en haut de la cellule
center - Centrer les éléments enfants verticalement
end - Aligner les éléments enfants en bas de la cellule
stretch - Étirer les éléments enfants pour remplir la hauteur de la cellule

Justify Items (Horizontal)

start - Aligner les éléments enfants à gauche de la cellule
center - Centrer les éléments enfants horizontalement
end - Aligner les éléments enfants à droite de la cellule
stretch - Étirer les éléments enfants pour remplir la largeur de la cellule

Propriétés Content (Alignement de toute la grille)

Align Content (Vertical)

start - Aligner la grille en haut du conteneur
center - Centrer la grille verticalement
end - Aligner la grille en bas du conteneur
space-* - Distribuer l'espace entre les lignes de la grille

Justify Content (Horizontal)

start - Aligner la grille à gauche du conteneur
center - Centrer la grille horizontalement
end - Aligner la grille à droite du conteneur
space-* - Distribuer l'espace entre les colonnes de la grille

Outils associés

Apprendre CSS Flexbox

Outil d'apprentissage interactif CSS Flexbox avec des démonstrations visuelles

Apprendre CSS Grid

Outil d'apprentissage interactif CSS Grid avec des démonstrations visuelles

All Tools →

Explore all tools