CSS - Propriété justify-items

Bonjour, aspirants développeurs web ! Aujourd'hui, nous allons plonger dans le merveilleux monde du CSS et explorer une propriété qui peut faire paraître vos mises en page comme si elles avaient été créées par un professionnel chevronné. Je parle de la propriété justify-items. Faites-moi confiance, à la fin de ce tutoriel, vous alignerez des éléments comme un juge de la Cour suprême ! ?

Qu'est-ce que justify-items ?

Avant de rentrer dans les détails, comprensons ce que fait justify-items. Imaginez que vous avez un conteneur de grille rempli de petits éléments de grille mignons. La propriété justify-items est comme une baguette magique qui vous permet de contrôler comment ces éléments sont alignés le long de l'axe en ligne (généralement horizontal) dans leurs zones de grille.

Syntaxe

La syntaxe de base pour justify-items est assez simple :

.container {
justify-items: value;
}

Où value peut être l'une des nombreuses options que nous allons explorer prochaînement. Mais d'abord, mettons en place une grille simple pour jouer :

<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(2, 100px);
grid-template-rows: repeat(2, 100px);
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}

.item {
background-color: #3498db;
color: white;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
}

Cela crée une grille 2x2 avec quatre éléments. Maintenant, explorons les différents valeurs que nous pouvons utiliser avec justify-items !

Valeurs possibles

Voici un tableau de toutes les valeurs possibles pour justify-items :

Valeur	Description
normal	Valeur par défaut, agit généralement comme stretch
stretch	Étire les éléments pour remplir la zone de grille
start	Aligne les éléments au début de la zone de grille
end	Aligne les éléments à la fin de la zone de grille
center	Centre les éléments dans la zone de grille
flex-start	Aligne les éléments au début (pour les conteneurs flex)
flex-end	Aligne les éléments à la fin (pour les conteneurs flex)
self-start	Aligne les éléments à leur propre côté de début
self-end	Aligne les éléments à leur propre côté de fin
left	Aligne les éléments à gauche
right	Aligne les éléments à droite
baseline	Aligne les éléments le long de leur ligne de base
last baseline	Aligne les éléments le long de leur dernière ligne de base
safe center	Centre les éléments en toute sécurité (évite la perte de données)
legacy right	Alignement à droite (prise en charge héritée)

Maintenant, cassons ces valeurs avec des exemples !

CSS justify-items - Valeur normal

.grid-container {
justify-items: normal;
}

La valeur normal est la valeur par défaut. Dans la plupart des cas, elle se comporte comme stretch. C'est comme dire à vos éléments de grille, "Soyez vous-même !"

CSS justify-items - Valeur stretch

.grid-container {
justify-items: stretch;
}

Avec stretch, vos éléments se répandront pour remplir toute la largeur de leur zone de grille. C'est comme dire à vos éléments de prendre une grande respiration et de s'étendre !

CSS justify-items - Valeur start

.grid-container {
justify-items: start;
}

La valeur start aligne vos éléments au début de leur zone de grille. Pensez-y comme aligner vos éléments à la ligne de départ d'une course.

CSS justify-items - Valeur end

.grid-container {
justify-items: end;
}

À l'inverse, end pousse vos éléments à la fin de leur zone de grille. C'est comme si vos éléments essaient de toucher la ligne d'arrivée !

CSS justify-items - Valeur center

.grid-container {
justify-items: center;
}

center fait exactement ce à quoi vous vous attendez - il centre vos éléments dans leur zone de grille. C'est parfait pour créer une mise en page équilibrée et sereine.

CSS justify-items - Valeurs flex-start et flex-end

.grid-container {
justify-items: flex-start;
}

.grid-container {
justify-items: flex-end;
}

Ces valeurs sont similaires à start et end, mais elles sont spécifiques aux conteneurs flex. Elles sont comme les cousins cool de start et end qui ne viennent que aux fêtes flex.

CSS justify-items - Valeurs self-start et self-end

.grid-container {
justify-items: self-start;
}

.grid-container {
justify-items: self-end;
}

Ces valeurs alignent les éléments à leur propre côté de début ou de fin, ce qui peut être différent du début ou de la fin du conteneur dans certains modes d'écriture. C'est comme laisser chaque élément décider de quel côté du lit ils veulent dormir !

CSS justify-items - Valeurs left et right

.grid-container {
justify-items: left;
}

.grid-container {
justify-items: right;
}

Ces valeurs font exactement ce qu'elles disent - alignent les éléments à gauche ou à droite. Simple et direct, comme une bonne tasse de café le matin.

CSS justify-items - Valeurs baseline et last baseline

.grid-container {
justify-items: baseline;
}

.grid-container {
justify-items: last baseline;
}

Ces valeurs alignent les éléments le long de leur ligne de base ou de leur dernière ligne de base. C'est particulièrement utile lorsque vous avez du texte de tailles différentes et que vous souhaitez les aligner joliment.

CSS justify-items - Valeur safe center

.grid-container {
justify-items: safe center;
}

Cette valeur centre les éléments, mais assure qu'aucune perte de données ne se produit. C'est comme avoir un filet de sécurité pour vos éléments centrés !

CSS justify-items - Valeur legacy right

.grid-container {
justify-items: legacy right;
}

Cette valeur est pour la compatibilité ascendante. C'est comme garder un vieux téléphone à clapet - vous ne l'utiliserez probablement pas, mais il est là au cas où vous en auriez besoin !

Et voilà, les amis ! Vous venez de faire un tour rapide de la propriété justify-items. Souvenez-vous, la clé pour maîtriser le CSS est la pratique. Alors, allez-y, expérimentez avec ces valeurs, et créez des mises en page alignées magnifiquement. Avant de vous en rendre compte, vous alignerez des éléments dans votre sommeil !

Bonne programmation, et que vos grilles soient toujours parfaitement alignées ! ??‍??‍?

Credits: Image by storyset