Le grid css

Le module CSS Grid layout (modèle de disposition en grille) est un module de la spécification CSS qui permet de créer des mises en page en divisant l'espace d'affichage en régions utilisables par une application ou en définissant des relations de taille, position et d'empilement entre les éléments HTML

Comme les tableaux, la grille permet d'aligner des éléments sous forme de colonnes et de lignes

Pour utiliser le grid :

  • Définir un display: grid sur la zone contenant la grille
  • Il est possible de définir les espaces entre les cases avec grid-gap sur la zone contenant la grille
  • Il est possible de paramétrer la taille des lignes avec grid-auto-rows
  • Chaque élément de la grille devra préciser la position occupée dans la grille :
    • grid-column: [index]; indique que l'objet est situé sur la colonne index
    • grid-column: [index1] / [ndex2]; indique que l'objet est situé sur la colonne index1 et se termine avant l'index2
    • grid-row: [index]; indique que l'objet est situé sur la ligne index
    • grid-row: [index1] / [ndex2]; indique que l'objet est situé sur la ligne index1 et se termine avant l'index2

Le nombre de lignes est de colonne est calculé automatiquement. D'autres options existent mais je ne présente qu'un fonctionnement sommaire.

<html>
	<head>
		<style>
#wrapper {
	display: grid;
	grid-gap: 10px;
	grid-auto-rows: minmax(100px, auto);
}
.un {
background-color:red;
	grid-column: 1;
	grid-row: 1;
}
.deux {
	background-color:blue;
	grid-column: 2;
	grid-row: 1;
}
.trois {
	background-color:green;
	grid-column: 2;
	grid-row: 2;
}
.quatre {
	background-color:cyan;
	grid-column: 1;
	grid-row: 3;
}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div class="un">
			</div>
			<div class="deux">
			</div>
			<div class="trois">
			</div>
			<div class="quatre">
			</div>
		</div>
	</body>
</html>

Les boites flexibles

Le module de disposition des boîtes flexibles CSS définit un modèle de boîtes optimisé pour la conception des interfaces utilisateurs. Les éléments d'une conteneur flexible peuvent être disposés dans n'importe quelle direction et étendre leurs dimensions (pour remplir un espace vide) ou se réduire pour éviter de dépasser en dehors de l'élément parent.

Utilisation basique du display:flex

<html>
	<head>
		<style>
#wrapper {
	display: flex;
}
.red {
	background-color:red;
	min-height: 30px;
	min-width: 30px;
}
.blue {
	background-color:blue;
	min-height: 30px;
	min-width: 30px;
}
.green {
	background-color:green;
	min-height: 30px;
	min-width: 30px;
}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div class="red">
			</div>
			<div class="blue">
			</div>
			<div class="green">
			</div>
		</div>
	</body>
</html>

Il est possible de définir la façon dont les éléments sont présentés dans une flex-box, pour celà, on utliise la propriété justify-content

  • justify-content: space-between; des espaces sont ajoutés entre les éléments
  • justify-content: space-around; des espaces sont ajoutés entre les éléments ainsi qu'entre les éléments et le bord de la flex-box
  • justify-content: start; valeur par défaut, tout est serré à gauche
  • justify-content: center; les élément sont centrés
<html>
	<head>
		<style>
#wrapper {
	display: flex;
	justify-content:space-around;
}
.red {
	background-color:red;
	min-height: 30px;
	min-width: 30px;
}
.blue {
	background-color:blue;
	min-height: 30px;
	min-width: 30px;
}
.green {
	background-color:green;
	min-height: 30px;
	min-width: 30px;
}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div class="red">
			</div>
			<div class="blue">
			</div>
			<div class="green">
			</div>
		</div>
	</body>
</html>

Pour modifier l'orientationde la flex-box, on utilise l'attribut : flex-direction

  • flex-direction:row : la boite est sur une ligne
  • flex-direction:column : la boite est sur une colonne
<html>
	<head>
		<style>
#wrapper {
	display: flex;
	height: 200px; 
	flex-direction: column;
	justify-content:space-around;
}
.red {
	background-color:red;
	min-height: 30px;
	min-width: 30px;
}
.blue {
	background-color:blue;
	min-height: 30px;
	min-width: 30px;
}
.green {
	background-color:green;
	min-height: 30px;
	min-width: 30px;
}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div class="red">
			</div>
			<div class="blue">
			</div>
			<div class="green">
			</div>
		</div>
	</body>
</html>