Informatique


Les grilles

Aller à

Introduction

L'utilisation des grilles permet de faciliter l'organisation du document html.
Le display:grid ne remplace aucun autre display, il s'agit d'un outil supplémentaire pour le développeur.

Pourquoi utiliser display:grid ?

  • Pour créer facilement le layout du document
  • Pour avoir un layout adaptable au device au sein duquel s'ouvre la page (RWD)
  • Pour créer des galerie d'images aisément


display:grid

display:grid donne à la balise un comportement grid.

C'est l'élément auquel on attribue le display:grid qui va piloter la grille.

Seuls les enfants directs de cette balise seront positionnés selon la grille définie dans le premier parent.

Démo
<head>
<meta charset="UTF-8">
<style>
	.container	{
		display:grid;
		height:60vh;
	}
	.header {
	background:#33FF8D;
	}
	.nav {
	background:#F1948A ;
	}
	.main {
	background:#D2B4DE;
	}
	.footer {
	background:#F9E79F;
	}
	.aside {
	background:#F2D7D5;
	}
</style>
</head>
<body>
<div class=container>
	<header class=header>header</header>
	<nav class=nav>nav</nav>
	<main class=main>main</main>
	<aside class=aside>aside</aside>
	<footer class=footer>footer</footer>
</div>

</body>

On constate:

  • nous avons défini une grille d'une colonne et une ligne
  • comme il n'y a pas assez de place pour placer les 5 éléments, grid a rajouter 4 lignes dynamiquement
  • les items se sont empilés les uns sur les autres dans l'ordre de leur présence dans le DOM
  • chaque item prend la place maximum sur la largeur et la hauteur
  • dans l'inspecteur le mot grid est apparu à côté de la balise de display grid
  • dans l'inspecteur, au survol de la balise de display grid, on voit clairement la grille se dessiner


Créer des colonnes

grid-template-columns permet de créer des colonnes.

Toutes les unités sont autorisées, l'unité relative fr (fraction) est très utilisée.

Démo
<head>
<meta charset="UTF-8">
<style>
	.container	{
		display:grid;
		grid-template-columns:200px 1fr 5fr 1fr 1fr;
	}
	.header {
	background:#33FF8D;
	}
	.nav {
	background:#F1948A ;
	}
	.main {
	background:#D2B4DE;
	}
	.footer {
	background:#F9E79F;
	}
	.aside {
	background:#F2D7D5;
	}
</style>
</head>
<body>
<div class=container>
	<header class=header>header</header>
	<nav class=nav>nav</nav>
	<main class=main>main</main>
	<aside class=aside>aside</aside>
	<footer class=footer>footer</footer>
</div>

</body>

On constate:

  • la grille est divisée en 5 colonnes
  • la première colonne est fixe et large de 200px
  • le reste de l'espace disponible est divisée en 4 fractions se répartissant sur le reste de l'espace disponible
  • les enfants directs de la balise de type grid se sont placés dans l'ordre du DOM,
    de gauche à droite et de haut en bas.
  • les enfants directs ou non de la balise de type grid garde leur type par défaut (sauf si on utilise display bien sûr!)

Si on réduit la largeur de la fenêtre il n'y aura pas de passage à la ligne si l'espace n'est pas suffisant.


Créer des lignes

grid-template-rows permet de créer des lignes.

Toutes les unités sont autorisées, on utilise souvent auto pour adapter la hauteur de ligne à son contenu.

Démo
<head>
<meta charset="UTF-8">
<style>
	.container	{
		display:grid;
		grid-template-columns:1fr 1fr 1fr;
		grid-template-rows:auto auto;
	}
	.header {
	background:#33FF8D;
	}
	.nav {
	background:#F1948A ;
	}
	.main {
	background:#D2B4DE;
	}
	.footer {
	background:#F9E79F;
	}
	.aside {
	background:#F2D7D5;
	}
</style>
</head>
<body>
<div class=container>
	<header class=header>header</header>
	<nav class=nav>nav</nav>
	<main class=main>main</main>
	<aside class=aside>aside</aside>
	<footer class=footer>footer</footer>
</div>

</body>

On constate:

  • la grille est divisée en 3 colonnes occupant chacune 1fr
  • la grille est divisée en 2 lignes occupant la hauteur de leur contenu
  • les enfants de la balise de display grid se sont bien placées dans l'ordre du DOM de gauche à droite et de haut en bas


Commande raccourcie

grid-template permet de créer des lignes et des colonnes en une seule commande.

Syntaxe / Exemple
.container{
	grid-template: auto auto / 1fr 1fr 1fr;
}

On constate:

  • d'abord les lignes
  • le / permet de séparer les déclarations des lignes et des colonnes
  • ensuite les colonnes

La liberté des unités est bien sûr de mise.


La fonction repeat()

repeat() permet de répéter un modèle de lignes et/ou de colonnes.

Exemples:

grid-template-columns : repeat(12,1fr);      on répète 12 fois une colonne de une fraction
grid-template-columns : 200 px repeat(5,1fr) 300px ;      7 colonnes: une de 200px,5 de une fraction, une de 300px.
grid-template-rows : repeat(5,1fr) 100px ;      6 lignes: 5 de une fraction, une de 100px de hauteur.

Créer des gouttières entre les lignes et les colonnes

column-gap et row-gap permettent de créer des gouttières.

Toutes les unités sont autorisées, on utilise souvent les unité relatives à la taille de la plice de caractères em pour créer les gouttières.

Démo
<head>
<meta charset="UTF-8">
<style>
	.container	{
		display:grid;
		grid-template-columns:1fr 1fr 1fr;
		grid-template-rows:auto auto;
		column-gap:1em;
		row-gap:1em;
	}
	.header {
	background:#33FF8D;
	}
	.nav {
	background:#F1948A ;
	}
	.main {
	background:#D2B4DE;
	}
	.footer {
	background:#F9E79F;
	}
	.aside {
	background:#F2D7D5;
	}
</style>
</head>
<body>
<div class=container>
	<header class=header>header</header>
	<nav class=nav>nav</nav>
	<main class=main>main</main>
	<aside class=aside>aside</aside>
	<footer class=footer>footer</footer>
</div>

</body>

On constate: Des gouttières horizontales et verticales divisent la grille.


Anatomie de la grille

Voir slide ici.

Démo
<head>
<meta charset="UTF-8">
<style>
	.container	{
		height:50vh;
		display:grid;
		grid-template-columns:1fr 1fr 1fr;
		grid-template-rows:auto auto;
		column-gap:1em;
		row-gap:1em;
	}
	.header {
	background:#33FF8D;
	}
	.nav {
	background:#F1948A ;
	}
	.main {
	background:#D2B4DE;
	}
	.footer {
	background:#F9E79F;
	}
	.aside {
	background:#F2D7D5;
	}
</style>
</head>
<body>
<div class=container>
	<header class=header>header</header>
	<nav class=nav>nav</nav>
	<main class=main>main</main>
	<footer class=footer>footer</footer>
	<aside class=aside>aside</aside>
</div>

</body>

On constate:

  • une cellule de la grille est définie par des lignes virtuelles
  • les lignes virtuelles sont numérotées de gauche à droite et de droite à gauche
  • une cellule de la grille est définie par 4 lignes virtuelles: 2 verticales et deux horizontales