Alignement dans Grille en CSS est une compétence essentielle pour tout développeur front-end. Maîtriser l’art d’aligner les éléments à l’intérieur d’une grille permet de créer des mises en page flexibles et esthétiquement plaisantes. Dans ce tutoriel, nous découvrirons les différentes techniques et propriétés CSS pour l’alignement dans Grid Layout. Préparez-vous à transformer vos interfaces utilisateur grâce à ces techniques avancées de CSS Grid.
Introduction à l’Alignement dans Grille en CSS
Le modèle de grille CSS permet de concevoir facilement des mises en page complexes en deux dimensions. Il comprend des propriétés spécifiques pour aligner les éléments de la grille à la fois sur l’axe horizontal et vertical. Grâce à ces propriétés, vous pouvez disposer les éléments exactement là où vous le souhaitez. Dans cet article, nous explorerons les diverses propriétés d’alignement disponibles.
Alignement des Éléments Enfants
Pour aligner les éléments à l’intérieur de la grille, on utilise principalement trois propriétés de Grid Layout : justify-items, align-items, et place-items. Ces propriétés permettent de contrôler comment les éléments enfants sont alignés à l’intérieur des conteneurs de grille. Pour le comprendre en profondeur, consultez cet article sur les éléments HTML.
Utiliser justify-items
La propriété justify-items est utilisée pour aligner les éléments sur l’axe horizontal (l’axe en ligne). Voici un exemple de son utilisation :
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center; /* start, end, center, stretch */
}
.grid-item {
background-color: #DDDDDD;
padding: 20px;
border: 1px solid #888888;
}
Utiliser align-items
La propriété align-items sert à aligner les éléments sur l’axe vertical (l’axe du bloc). Voici un exemple :
.grid-container {
display: grid;
grid-template-rows: 100px 100px 100px;
align-items: start; /* start, end, center, stretch */
}
.grid-item {
background-color: #DDDDDD;
padding: 20px;
border: 1px solid #888888;
}
Alignement des Éléments Conteneurs
Tout comme pour les éléments enfants, il est également possible d’aligner les éléments conteneurs en utilisant les propriétés justify-content, align-content, et place-content. Ces propriétés affectent la disposition de l’ensemble de la grille. Apprenez comment utiliser ces propriétés dans ce guide complet sur la disposition du contenu en CSS Grid.
Utiliser justify-content
La propriété justify-content contrôle l’alignement des lignes de grille sur l’axe horizontal. Voici un exemple :
.grid-container {
display: grid;
grid-template-columns: repeat(3, 200px);
justify-content: space-between; /* start, end, center, space-between, space-around, space-evenly */
}
.grid-item {
background-color: #DDDDDD;
padding: 20px;
border: 1px solid #888888;
}
Utiliser align-content
La propriété align-content règle l’alignement des lignes de grille sur l’axe vertical. Voici comment l’utiliser :
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
align-content: center; /* start, end, center, space-between, space-around, space-evenly */
}
.grid-item {
background-color: #DDDDDD;
padding: 20px;
border: 1px solid #888888;
}
Placement d’Items Individualisés
Parfois, vous aurez besoin d’aligner un élément spécifique différemment des autres. Pour cela, on utilise les propriétés justify-self et align-self sur un élément particulier. Pour aller plus loin, découvrez comment utiliser les attributs de classe et d’identifiant pour affiner votre alignement des éléments.
Utiliser justify-self
La propriété justify-self permet d’aligner un seul élément sur l’axe horizontal. Exemple :
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.grid-item {
background-color: #DDDDDD;
padding: 20px;
border: 1px solid #888888;
}
.grid-item:first-child {
justify-self: center; /* start, end, center, stretch */
}
Utiliser align-self
La propriété align-self permet d’aligner un seul élément sur l’axe vertical. Exemple :
.grid-container {
display: grid;
grid-template-rows: 100px 100px 100px;
}
.grid-item {
background-color: #DDDDDD;
padding: 20px;
border: 1px solid #888888;
}
.grid-item:first-child {
align-self: end; /* start, end, center, stretch */
}
Utilisation Combinée des Propriétés
Les propriétés d’alignement peuvent être combinées pour obtenir des mises en page complexes mais harmonieuses. Voici un exemple pratique combinant plusieurs propriétés d’alignement :
.grid-container {
display: grid;
grid-template-columns: 100px 1fr 100px;
grid-template-rows: 50px 1fr 50px;
justify-items: center;
align-items: center;
}
.header {
grid-column: 1 / -1;
justify-self: stretch;
}
.sidebar {
grid-row: 2;
align-self: stretch;
}
.content {
grid-row: 2;
justify-self: stretch;
}
.footer {
grid-column: 1 / -1;
}
Alignement Dynamique avec place-items et place-content
Les propriétés place-items et place-content sont des raccourcis pour justify-items et align-items, et justify-content et align-content, respectivement. Elles permettent de définir l’alignement des éléments en une seule ligne :
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
place-items: center stretch; /* align-items / justify-items */
}
.grid-container-content {
display: grid;
grid-template-rows: repeat(3, 100px);
place-content: space-between center; /* align-content / justify-content */
}
Faire Apprécier la Lecture avec des Design Efficaces
Un bon design ne sert pas seulement à rendre une page web esthétique, il améliore également la lisibilité et l’expérience utilisateur. En maîtrisant l’alignement dans la grille CSS, vous pouvez organiser le contenu de manière cohérente et agréable, rendant la lecture plus fluide et agréable pour les utilisateurs. Amusez-vous à essayer ces techniques sur vos propres projets et observez comment elles transforment l’apparence de vos pages web. Pour plus de techniques en matière de design web, explorez notre guide pour créer votre première page HTML.
Conclusion
Les techniques d’Alignement dans Grille en CSS sont essentielles pour tout développeur cherchant
