Règle générale:
justify-items et align-items s'utilisent dans la balise de display grid.
justify-items
justify-items aligne horizontalement un grid item dans sa cellule.
- strech: l'item de la cellule prend toute la place possible
- center: l'item de la cellule est limité au contenu informatif et est centré sur la largeur
- start: l'item de la cellule est limité au contenu informatif et est placé à gauche
- end: l'item de la cellule est limité au contenu informatif et est placé à droite
Réalisons la grille suivants:
Tester la grille dans l'inspecteur avec toutes les valeur possible pour la propriétés.
Démo
<head>
<meta charset="UTF-8">
<style>
.grille{
display:grid;
background-color:#dddddd;
grid-gap:10px;
grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(1,minmax(50px,auto));
justify-items:stretch; /*tester les autres valeurs dans l'inspecteur*/
}
.divi1{
background-color:pink;
}
.divi2{
background-color:LemonChiffon;
}
.divi3{
background-color:Lavender;
}
</style>
</head>
<body>
<div class="grille">
<div class="divi1">1</div>
<div class="divi2">2</div>
<div class="divi3">3</div>
</div>
align-items
align-items aligne verticalement un grid item dans sa cellule.
- strech: l'item de la cellule prend toute la place possible
- center: l'item de la cellule est limité au contenu informatif et est centré sur la hauteur
- start: l'item de la cellule est limité au contenu informatif et est placé à son sommet
- end: l'item de la cellule est limité au contenu informatif et est placé à sa base
Réalisons la grille suivants:
Tester la grille dans l'inspecteur avec toutes les valeur possible pour la propriété.
Démo
<head>
<meta charset="UTF-8">
<style>
.grille{
display:grid;
background-color:#dddddd;
grid-gap:10px;
grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(1,minmax(50px,auto));
align-items:strech; /*tester les autres valeurs dans l'inspecteur*/
}
.divi1{
background-color:pink;
}
.divi2{
background-color:LemonChiffon;
}
.divi3{
background-color:Lavender;
}
</style>
</head>
<body>
<div class="grille">
<div class="divi1">1</div>
<div class="divi2">2</div>
<div class="divi3">3</div>
</div>
justify-items et align-items
Réalisons la grille suivants:
Tester la grille dans l'inspecteur avec toutes les valeur possible pour les propriétés.
Démo
<head>
<meta charset="UTF-8">
<style>
.grille{
display:grid;
background-color:#dddddd;
grid-gap:10px;
grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(1,minmax(50px,auto));
justift-items:stretch;
align-items:stretch;
}
.divi1{
background-color:pink;
}
.divi2{
background-color:LemonChiffon;
}
.divi3{
background-color:Lavender;
}
</style>
</head>
<body>
<div class="grille">
<div class="divi1">1</div>
<div class="divi2">2</div>
<div class="divi3">3</div>
</div>
