Présentation

Qu'est ce que grid?

La propriété css grid est une propriété encore récente qui est très pratique pour la mise en page. Elle permet essentiellement de définir une grille virtuelle css pour la disposition des éléments html dans la page.

Une page web pour se former :

page alsacreation

Un exemple de mise en page avec grid

Une mise en page simple avec grid:

</html>

Un second exemple de mise en page avec grid

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>
	
	
	<footer>
		Éléments de pied de page
	</footer>
	  
</body>

</html>

Nommer les emplacements

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

<!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>
	
	
	<footer>
		Éléments de pied de page
	</footer>
	  
</body>

</html>

Emplacements vides

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>
	
	
	<footer>
		Éléments de pied de page
	</footer>
	  
</body>

</html>

Occuper plusieurs cellules

Une cellule peut occuper l'emplacement de plusieurs cellules.

<!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>
	
	
	<footer>
		Éléments de pied de page
	</footer>
	  
</body>

</html>

Compléments

Il existe encore un certain nombre de paramètres permettant beaucoup de souplesse avec cet outil.

Un dernier exemple: 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.

</html>

Placement au fil de l'eau

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).

</html>

Compléter le code css (entre les balises style) ci-dessous pour obtenir une mise en page et mise en forme similaire à celle donnée ci-dessous.

<!DOCTYPE html>
<html lang="fr">

<header>
	<h1>Un super titre</h1>
	<h2> Un joli sous-titre</h2>
</header>

<div class="grillePrincipale">
	
	<nav>
		Ici on navigue.
		<ul>
			<li><a href="#">lien 1</a></li>
			<li><a href="#">lien 2</a></li>
			<li><a href="#">lien 3</a></li>
			<li><a href="#">lien 4</a></li>
		</ul>
	</nav>
	
	<main>
		<article>Raymond Devos</article>
		<article>L'autre jour, au café, je commande un demi. J'en bois la moitié. Il ne m'en restait plus.</article>
		<article>Je suis adroit de la main gauche et je suis gauche de la main droite.</article>
		<article>Se coucher tard nuit.</article>
		<article>Quand un homme ne dit rien alors que tout le monde parle, on n'entend plus que lui !</article>
		<article>Si l'on peut trouver moins que rien, c'est que rien vaut déjà quelque chose.</article>
		<article>Ne rien faire, ça peut se dire. Ca ne peut pas se faire !</article>
	</main>
	
	<aside>
		Ici, plein de remarques complémentaires super captivantes.
	</aside>
</div>

</body>         
</html>

un code possible

<!DOCTYPE html>
<html lang="fr">

<head>
        <meta charset="utf-8">
        <title> grid </title>
        <style>
		html{
			font-size: 20px;
		}
        header{ 
			background-color: #999999;
			text-align: center;
			color: white;
			font-weight: bold;
		}
		footer{ 
			background-color: #999999;
			text-align: center;
			color: white;
			font-weight: bold;
			margin-top: 10px;
		}
	  
		h1{
			font-size: 2rem;
		}
		h2{
			font-size: 1.5rem;
		}
		h3{
			font-size: 1.2rem;
		}
		
		nav{
			background-color: #bbbbbb;
		}
		
		aside{
			background-color: green;
			color: white;
			font-weight: bold;
		}
		
		.grillePrincipale{
			display: grid;
			grid-template-columns: 200px 1fr 200px;
			column-gap: 5px;
		}
		
		main{
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 5px;
		}
		
		main article:nth-child(4n+0) {
			background-color: pink;
		}
		main article:nth-child(4n+1) {
			background-color: GreenYellow;
		}
		main article:nth-child(4n+2) {
			background-color: Cornsilk;
		}
		main article:nth-child(4n+3) {
			background-color: #00FFFF;
		}
		a{
			text-decoration: none;
			color: white;
			font-weight:bold;
		}
        </style>
    </head>
    
<body>

<header>
	<h1>Un super titre</h1>
	<h2> Un joli sous-titre</h2>
</header>

</body>         
</html>