Informatique


Aligner les cellules de la grille

Aller à

Règle générale justify-content align-content justify-content et align-content
 

Règle générale:

justify-content et align-content s'utilisent dans la balise de display grid.

justify-content et align-content ne s'utilisent que lorsque la taille de la grille est inférieure à la taille du conteneur!

justify-content

justify-content aligne horizontalement toute la grille au sein du container.

  • strech: la grille prend toute la place possible
  • center: la grille se place au milieu du container
  • start: la grille se place au début (à gauche) du container
  • end: la grille se place à la fin (à gauche) du container
  • space-between: les cellules de la grille sont justifiées
  • space-around: les cellules de la grille sont justifiées mais les espacements sont différents
  • space-evenly: autre variante des c2 cas précédents

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,100px);
	grid-template-rows:repeat(1,minmax(100px,auto));
	justify-content:space-between; /*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-content

justify-content aligne verticalement toute la grille au sein du container.

  • strech: la grille prend toute la place possible
  • center: la grille se place au milieu du container
  • start: la grille se place au début (à gauche) du container
  • end: la grille se place à la fin (à gauche) du container
  • space-between: les cellules de la grille sont justifiées
  • space-around: les cellules de la grille sont justifiées mais les espacements sont différents
  • space-evenly: autre variante des c2 cas précédents

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,100px);
	grid-template-rows:repeat(1,minmax(100px,auto));
	align-content:center; /*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-content et align-content

Réalisons la grille suivants:

Dans l'exemple précédent, utiliser les 2 commandes simultanément dans l'inspecteur.