Propriété CSS justify-items
La propriété CSS justify-items définit l'alignement par défaut des éléments de grille sur l'axe en ligne (ligne). Découvrez toutes les valeurs avec des exemples.
La propriété CSS justify-items définit l'alignement par défaut de chaque élément à l'intérieur d'un conteneur le long de l'axe en ligne (ligne) — dans une langue de gauche à droite, cela correspond à la direction horizontale. Elle est appliquée sur le conteneur et agit comme valeur justify-self par défaut pour tous ses enfants à la fois. Chaque élément individuel peut toujours remplacer cette valeur par défaut avec sa propre valeur justify-self.
Dans CSS Grid, justify-items contrôle la position de chaque élément horizontalement dans sa propre cellule de grille — à gauche, à droite, centré ou étiré pour remplir la cellule. La propriété complémentaire align-items fait la même chose le long de l'axe de bloc (colonne), et le raccourci place-items définit les deux en une seule déclaration.
Quand l'utiliser
Utilisez justify-items lorsque vous avez une grille et souhaitez que toutes les cellules partagent le même placement horizontal sans écrire justify-self sur chaque élément. Cas typiques :
- Centrer le contenu dans chaque cellule de grille (
center). - Pousser les cellules vers le bord de début ou de fin (
start/end). - Laisser les éléments s'étirer pour remplir toute la largeur de la cellule (
stretch, valeur par défaut de la grille).
Remarque :
justify-itemss'applique aux conteneurs de grille et aux éléments positionnés de manière absolue. Elle est ignorée dans Flexbox — utilisezjustify-contentpour distribuer les éléments flex le long de l'axe principal à la place.
| Valeur initiale | auto |
|---|---|
| S'applique à | Conteneurs de grille et éléments positionnés de manière absolue. |
| Hérité | Non. |
| Animatable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.justifyItems = "start"; |
Syntaxe
Valeurs CSS de justify-items
justify-items: auto | normal | start | end | flex-start | flex-end | self-start | self-end | center | left | right | baseline | first-baseline | last-baseline | stretch | safe | unsafe | legacy | initial | inherit;Exemple : justify-items avec la valeur "start"
Exemple de code CSS justify-items
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px;
justify-items: start;
background-color: #cccccc;
}
#example > div {
padding: 10px;
font-size: 20px;
color: white;
width: 100px;
height: 50px;
}
.one {
background-color: #1c87c9;
}
.two {
background-color: #8ebf42;
}
.three {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Justify-items property example</h2>
<div id="example">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>Résultat
Avec justify-items: start, chaque élément est tiré vers le bord gauche de sa cellule de grille. Changez la valeur par center, end ou stretch (ci-dessous) pour voir les éléments se déplacer dans les mêmes cellules.
Exemple : justify-items avec la valeur "center"
Exemple CSS justify-items center
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px;
justify-items: center;
background-color: #cccccc;
}
#example > div {
padding: 10px;
font-size: 20px;
color: white;
width: 100px;
height: 50px;
}
.one {
background-color: #1c87c9;
}
.two {
background-color: #8ebf42;
}
.three {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Justify-items property example</h2>
<div id="example">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>Exemple : justify-items avec la valeur "first-baseline"
Exemple de la propriété justify-items avec la valeur "first-baseline" :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.container {
display: grid;
padding-top: 10px;
height: 250px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
background: #ccc;
justify-items: first-baseline;
}
.item {
width: 50%;
height: 50%;
text-align: center;
}
.item1 {
background: red;
}
.item2 {
background: blue;
}
.item3 {
background: green;
}
</style>
</head>
<body>
<h2>Justify-items property example</h2>
<div class="container">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
</div>
</body>
</html>Exemple : justify-items avec la valeur "self-end"
Exemple de la propriété justify-items avec la valeur "self-end" :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px;
justify-items: self-end;
background-color: #cccccc;
}
#example > div {
padding: 10px;
font-size: 20px;
color: white;
width: 100px;
height: 50px;
}
.one {
background-color: #1c87c9;
}
.two {
background-color: #8ebf42;
}
.three {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Justify-items property example</h2>
<div id="example">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| auto | Si la boîte n'a pas de parent ou est positionnée de manière absolue, la valeur auto représente normal. |
| normal | L'effet dépend du mode de mise en page : • Mises en page en bloc : se comporte comme start. • Mises en page positionnées de manière absolue : se comporte comme start pour les éléments remplacés, et stretch pour les autres. • Cellules de tableau : ignoré. • Flexbox : ignoré. • Mises en page en grille : se comporte comme stretch, sauf pour les éléments ayant un rapport d'aspect ou une taille intrinsèque, où il se comporte comme start. |
| start | Tous les éléments sont positionnés les uns par rapport aux autres sur le bord de début (gauche) du conteneur. |
| end | Tous les éléments sont positionnés les uns par rapport aux autres sur le bord de fin (droite) du conteneur. |
| flex-start | Les éléments sont placés au début du conteneur. |
| flex-end | Les éléments sont placés à la fin du conteneur. |
| self-start | L'élément est autorisé à se placer sur le bord du conteneur en fonction de son propre côté de début. |
| self-end | L'élément est autorisé à se placer sur le bord du conteneur en fonction de son propre côté de fin. |
| center | Les éléments sont positionnés les uns à côté des autres vers le centre du conteneur. |
| left | Les éléments sont placés les uns à côté des autres vers le côté gauche du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme end. |
| right | Les éléments sont placés les uns à côté des autres vers le côté droit du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme start. |
| baseline | Aligne tous les éléments d'un groupe en faisant correspondre leurs lignes de base d'alignement. |
| first-baseline | Aligne tous les éléments d'un groupe en faisant correspondre leurs premières lignes de base d'alignement. |
| last-baseline | Aligne tous les éléments d'un groupe en faisant correspondre leurs dernières lignes de base d'alignement. |
| stretch | Étire l'élément pour qu'il corresponde au conteneur le long de l'axe en ligne/principal. |
| safe | Si la taille de l'élément dépasse le conteneur d'alignement, l'élément est aligné comme si le mode d'alignement était start. |
| unsafe | Quelle que soit la taille de l'élément et du conteneur d'alignement, la valeur d'alignement est respectée. |
| legacy | Mot-clé hérité pour la compatibilité ascendante. Correspond à flex-start, flex-end ou center selon le mode de mise en page. N'affecte pas l'héritage. |
| initial | Applique la valeur par défaut de la propriété. |
| inherit | Hérite la propriété de son élément parent. |
justify-items vs justify-self
Ces deux propriétés se ressemblent mais s'appliquent à des éléments différents :
justify-itemsest défini sur le conteneur et fournit un alignement horizontal par défaut pour tous ses éléments.justify-selfest défini sur un élément individuel et remplace la valeurjustify-itemsdu conteneur uniquement pour cet élément.
Un schéma courant consiste donc à définir une valeur par défaut avec justify-items sur la grille, puis à ajuster un ou deux éléments particuliers avec justify-self.
justify-items vs align-items
justify-items et align-items agissent sur des axes perpendiculaires :
justify-items→ axe en ligne (ligne) — placement horizontal dans un document de gauche à droite.align-items→ axe de bloc (colonne) — placement vertical.
Pour définir les deux à la fois, utilisez le raccourci place-items : place-items: <align-items> <justify-items>.
Compatibilité des navigateurs
justify-items est pris en charge par tous les navigateurs modernes (Chrome, Edge, Firefox, Safari et Opera) dans le cadre du module CSS Box Alignment. Son principal cas d'utilisation — l'alignement dans CSS Grid — est également largement pris en charge.