grid

grid permet de définir en css une grille de mise en page des éléments html.

Exemple 1

On utilise grid ci-dessous pour une mise en page classique :

<!DOCTYPE html>
<html lang="fr">
	
<head>
<meta charset="utf-8">
<title> grid  </title>
<style>
	
	header{
		text-align: center;
		background-color: rgb(255,255,0);
	}
	footer{
		text-align: center;
		background-color: rgb(0,255,255);
	}
	
	
	.conteneur{ /* contiendra les éléments à disposer en "grille" */
		display: grid;
		grid-template-columns: 20% 80%;
		margin-bottom: 1em; /* marge sous la boîte */
		
	}
	nav{
		grid-column: 1; /* placement en colonne 1 */
		border: 1px dashed red; /* bordure pour mieux situer l'élément dans cet exemple */
		padding: 1em;
	}
	main{
		grid-column: 2; /* placement en colonne 2 */
		border: 1px solid green; /* bordure pour mieux situer l'élément dans cet exemple */
		padding: 1em;
	}
 
</style>
</head>
    
<body>
	
	<header>
		<h1>Titre de page</h1>
		<h2>sous-titre</h2>
	</header>
	
	
	<div class="conteneur">
		
		<nav>
			liens de navigation du site
		</nav>
		
		<main>
			<section>
				section 1
			</section>
			
			<section>
				section 2
			</section>
		</main>
		
	</div><!-- fin de la partie "grille" -->
	
	
	<footer>
		Éléments de pied de page
	</footer>
	  
</body>

</html>

Exemple 2

On peut également définir des lignes et emboîter les grilles.

<!DOCTYPE html>
<html lang="fr">
	
<head>
<meta charset="utf-8">
<title> grid  </title>
<style>
	
	header{
		text-align: center;
		background-color: rgb(255,255,0);
	}
	
	
	footer{
		text-align: center;
		background-color: rgb(0,255,255);
	}
	
	
	.conteneur{ /* contiendra les éléments à disposer en "grille" */
		display: grid;
		grid-template-columns: 20% 80%;
		margin-bottom: 1em; /* marge sous la boîte */
	}
	
	nav{
		grid-column: 1; /* placement en colonne 1 */
		border: 1px dashed red; /* bordure pour mieux situer l'élément dans cet exemple */
		padding: 1em;
	}
	main{
		grid-column: 2; /* placement en colonne 2 */
		border: 1px solid green; /* bordure pour mieux situer l'élément dans cet exemple */
		padding: 1em;
	}
	
	
	.grilleContenu{ /* une  grille à l'intérieur de la première grille pour la partie main */
		display: grid;
		grid-template-columns: 50% 50%;
		grid-template-rows: 100px 100px;
	}
	
	.no{
		grid-column: 1; grid-row: 1;
		background-color: cornsilk;
	}
	.ne{
		grid-column: 2; grid-row: 1;
		background-color: lavender;
	}
	.se{
		grid-column: 2; grid-row: 2;
		background-color: khaki;
	}
	.so{
		grid-column: 1; grid-row: 2;
		background-color:WhiteSmoke;
	}
 
</style>
</head>
    
<body>
	
	<header>
		<h1>Titre de page</h1>
		<h2>sous-titre</h2>
	</header>
	
	
	<div class="conteneur">
		
		<nav>
			liens de navigation du site
		</nav>
		
		<main class="grilleContenu">
			<section class="no">
				Ligne 1, colonne 1
			</section>
			
			<section class="se">
				Ligne 2, colonne 2
			</section>
			
			<section class="so">
				Ligne 2, colonne 1
			</section>
			
			<section class="ne">
				Ligne 1, colonne 2
			</section>
		</main>
		
	</div><!-- fin de la partie "grille" -->
	
	
	<footer>
		Éléments de pied de page
	</footer>
	  
</body>

</html>

Nommer les emplacements

On peut également définir des noms pour les emplacements.

Exemple 1

<!DOCTYPE html>
<html lang="fr">
	
<head>
<meta charset="utf-8">
<title> grid  </title>
<style>
	
	header{
		text-align: center;
		background-color: rgb(255,255,0);
	}
	
	
	footer{
		text-align: center;
		background-color: rgb(0,255,255);
	}
	
	
	.conteneur{ /* contiendra les éléments à disposer en "grille" */
		display: grid;
		grid-template-columns: 20% 80%;
		margin-bottom: 1em; /* marge sous la boîte */
		grid-template-areas: "gauche droite";
	}
	
	nav{
		grid-area: gauche; /* placement en colonne 1 */
		border: 1px dashed red; /* bordure pour mieux situer l'élément dans cet exemple */
		padding: 1em;
	}
	main{
		grid-area: droite; /* placement en colonne 2 */
		border: 1px solid green; /* bordure pour mieux situer l'élément dans cet exemple */
		padding: 1em;
	}
	
	
	.grilleContenu{
		display: grid;
		grid-template-columns: 50% 50%;
		grid-template-areas: "NordOuest NordEst"
							 "SudOuest  SudEst";
	}
	
	.no{
		grid-area: NordOuest; 
		background-color: cornsilk;
	}
	.ne{
		grid-area: NordEst; 
		background-color: lavender;
	}
	.se{
		grid-area: SudEst; 
		background-color: khaki;
	}
	.so{
		grid-area: SudOuest; 
		background-color:WhiteSmoke;
	}
 
</style>
</head>
    
<body>
	
	<header>
		<h1>Titre de page</h1>
		<h2>sous-titre</h2>
	</header>
	
	
	<div class="conteneur">
		
		<nav>
			liens de navigation du site
		</nav>
		
		<main class="grilleContenu">
			<section class="no">
				Ligne 1, colonne 1
			</section>
			
			<section class="se">
				Ligne 2, colonne 2
			</section>
			
			<section class="so">
				Ligne 2, colonne 1
			</section>
			
			<section class="ne">
				Ligne 1, colonne 2
			</section>
		</main>
		
	</div><!-- fin de la partie "grille" -->
	
	
	<footer>
		Éléments de pied de page
	</footer>
	  
</body>

</html>

Exemple 2

On peut également avoir des emplacements vides (on les nomme par un point).

<!DOCTYPE html>
<html lang="fr">
	
<head>
<meta charset="utf-8">
<title> grid  </title>
<style>
	
	header{
		text-align: center;
		background-color: rgb(255,255,0);
	}
	
	
	footer{
		text-align: center;
		background-color: rgb(0,255,255);
	}
	
	
	.conteneur{ /* contiendra les éléments à disposer en "grille" */
		display: grid;
		grid-template-columns: 20% 80%;
		margin-bottom: 1em; /* marge sous la boîte */
		grid-template-areas: "gauche droite";
	}
	
	nav{
		grid-area: gauche; /* placement en colonne 1 */
		border: 1px dashed red; /* bordure pour mieux situer l'élément dans cet exemple */
		padding: 1em;
	}
	main{
		grid-area: droite; /* placement en colonne 2 */
		border: 1px solid green; /* bordure pour mieux situer l'élément dans cet exemple */
		padding: 1em;
	}
	
	
	.grilleContenu{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas: "A . B"
							 ". C  D";
	}
	
	.no{
		grid-area: A; 
		background-color: cornsilk;
	}
	.ne{
		grid-area: B; 
		background-color: lavender;
	}
	.se{
		grid-area: D; 
		background-color: khaki;
	}
	.so{
		grid-area: C; 
		background-color:WhiteSmoke;
	}
 
</style>
</head>
    
<body>
	
	<header>
		<h1>Titre de page</h1>
		<h2>Le coin Geluck</h2>
	</header>
	
	
	<div class="conteneur">
		
		<nav>
			liens de navigation du site
		</nav>
		
		<main class="grilleContenu">
			<section class="no">
				Boire du café empêche de dormir. Par contre, dormir empêche de boire du café. 
			</section>
			
			<section class="se">
				Il est plus facile de jouer au mikado avec des spaghettis crus qu'avec des spaghettis cuits.
			</section>
			
			<section class="so">
				Quand je dis que ma richesse est intérieure je veux dire que mon argent est dans un coffre.
			</section>
			
			<section class="ne">
				Les imbéciles pensent que tous les noirs se ressemblent. Je connais un noir qui trouve, lui, que tous les imbéciles se ressemblent.
			</section>
		</main>
		
	</div><!-- fin de la partie "grille" -->
	
	
	<footer>
		Éléments de pied de page
	</footer>
	  
</body>

</html>

Exemple 3

Une cellule peut également occuper "plusieurs emplacements" (on donne le même nom).

<!DOCTYPE html>
<html lang="fr">
	
<head>
<meta charset="utf-8">
<title> grid  </title>
<style>
	
	header{
		text-align: center;
		background-color: rgb(255,255,0);
	}
	
	
	footer{
		text-align: center;
		background-color: rgb(0,255,255);
	}
	
	
	.conteneur{ /* contiendra les éléments à disposer en "grille" */
		display: grid;
		grid-template-columns: 20% 80%;
		margin-bottom: 1em; /* marge sous la boîte */
		grid-template-areas: "gauche droite";
	}
	
	nav{
		grid-area: gauche; /* placement en colonne 1 */
		border: 1px dashed red; /* bordure pour mieux situer l'élément dans cet exemple */
		padding: 1em;
	}
	main{
		grid-area: droite; /* placement en colonne 2 */
		border: 1px solid green; /* bordure pour mieux situer l'élément dans cet exemple */
		padding: 1em;
	}
	
	
	.grilleContenu{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas: "A B B"
							 "A C D";
		grid-gap: 2px;
	}
	
	.no{
		grid-area: A; 
		background-color: green;
		color:orange;
	}
	.ne{
		grid-area: B; 
		background-color: lavender;
	}
	 
	.so{
		grid-area: C; 
		background-color: orange;
	}
    
	.se{
		grid-area: D; 
		background-color: khaki;
	}
</style>
</head>
    
<body>
	
	<header>
		<h1>Titre de page</h1>
		<h2>Le coin Geluck</h2>
	</header>
	
	
	<div class="conteneur">
		
		<nav>
			liens de navigation du site
		</nav>
		
		<main class="grilleContenu">
			<section class="no">
				Boire du café empêche de dormir. Et dormir empêche de boire du café. 
			</section>
			
			<section class="se">
				Il est plus facile de jouer au mikado avec des spaghettis crus qu'avec des spaghettis cuits.
			</section>
			
			<section class="so">
				Quand je dis que ma richesse est intérieure je veux dire que mon argent est dans un coffre.
			</section>
			
			<section class="ne">
				Les imbéciles pensent que tous les noirs se ressemblent. Je connais un noir qui trouve, lui, que tous les imbéciles se ressemblent.
			</section>
		</main>
		
	</div><!-- fin de la partie "grille" -->
	
	
	<footer>
		Éléments de pied de page
	</footer>
	  
</body>

</html>

Quelques compléments

On peut affiner les grilles avec des "gouttières" entre les éléments de grille, avec un découpage en grille de même largeur automatisé, etc...

Vous consulterez les liens suivants pour compléter l'information sur grid :

Exemple 1

Découpage avec une colonne gauche de 100px puis 4 colonnes de même largeur, les colonnes seront séparées par des gouttières de 5px.

Pour définir 4 colonnes de même largeur, on utilise l'unité fr ("fraction restante"). repeat(4,1fr) permet ainsi de couper le restant en 4 colonnes de même largeur. Pour bien comprendre le fonctionnement, remplacer repeat(4,1fr) par (par exemple) 2fr 1fr 1fr 1fr, vous obtiendrez 4 colonnes dont la première est deux fois plus large que les autres. Le code repeat(4,1fr) est équivalent à 1fr 1fr 1fr 1fr.

<!DOCTYPE html>
<html lang="fr">
	
<head>
<meta charset="utf-8">
<title> grid  </title>
<style>
	
	header{
		text-align: center;
		background-color: rgb(255,255,0);
	}
	
	
	footer{
		text-align: center;
		background-color: rgb(0,255,255);
		margin-top: 5px;
	}
	
	
	.conteneur{ /* contiendra les éléments à disposer en "grille" */
		display: grid;
		grid-template-columns: 100px repeat(4, 1fr);
		grid-column-gap: 5px;
	}
	
	nav{
		grid-column: 1;  
		background-color: red;
		padding: 1em;
	}
	
	.un{
		grid-column: 2;  
		background-color: yellow;
		padding: 1em;
	}
	
	.deux{
		grid-column: 3;  
		background-color: magenta;
		padding: 1em;
	}
	
	.trois{
		grid-column: 4;  
		background-color: lightblue;
		padding: 1em;
	}
	
	.quatre{
		grid-column: 5;  
		background-color: orange;
		padding: 1em;
	}
	 
 
</style>
</head>
    
<body>
	
	<header>
		<h1>Titre de page</h1>
		<h2>sous-titre</h2>
	</header>
	
	
	<div class="conteneur">
		
		<nav>
			liens de navigation du site
		</nav>
		
		 
			<section class="un">
				1984 -  George Orwell
			</section>
			
			<section class="deux">
				Dune -  Frank Herbert
			</section>
			
			<section class="trois">
				Fondation -  Isaac Asimov
			</section>
			
			<section class="quatre">
				Hypérion - Dan Simmons
			</section>
	 
		
	</div><!-- fin de la partie "grille" -->
	
	
	<footer>
		Éléments de pied de page
	</footer>
	  
</body>

</html>

Exemple 2

Dans les exemples précédents, nous avons explicitement placé les éléments dans la grille. Il est possible également de les laisser se placer automatiquement (dans l'ordre de leur écriture).

<!DOCTYPE html>
<html lang="fr">
	
<head>
<meta charset="utf-8">
<title> grid  </title>
<style>
	
	header{
		text-align: center;
		background-color: rgb(255,255,0);
	}
	
	
	footer{
		text-align: center;
		background-color: rgb(0,255,255);
		margin-top: 5px;
	}
	
	
	.conteneur{ /* contiendra les éléments à disposer en "grille" */
		display: grid;
		grid-template-columns: 200px 1fr;
		column-gap: 20px;
	}
	
	nav{
		grid-column: 1;  
		background-color: red;
		padding: 1em;
	}
	
	article{
		background-color: orange;
	}
	
	.grilleContenu{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 5px;
	}
	 
 
</style>
</head>
    
<body>
	
	<header>
		<h1>Titre de page</h1>
		<h2>sous-titre</h2>
	</header>
	
	
	<div class="conteneur">
		
		<nav>
			liens de navigation du site
		</nav>
		
		<main class="grilleContenu">
			<article>
				article 1
			</article>
			
			<article>
				article 2
			</article>
			
			<article>
				article 3
			</article>
			
			<article>
				article 4
			</article>
			
			<article>
				article 5
			</article>
		</main> 	
	 
		
	</div><!-- fin de la partie "grille" -->
	
	
	<footer>
		Éléments de pied de page
	</footer>
	  
</body>

</html>