Informatique


Positionnement nommé

Aller à

grid-area

grid-area permet d'associer un nom aux enfants d'un élément de display grid.


grid-template-areas

grid-template-areas permet de répartir les enfants par leur nom sur la grille.

Attention, toutes les cellules de la grille doivent recevoir un et un seul nom d'enfant.


Démo
<head>
<meta charset="UTF-8">
<style>
	body{margin:0;}
	.container	{
	min-height:100vh;
	display:grid;
	grid-template-columns:repeat(6,1fr);
	grid-template-rows:100px 1fr 100px;
	grid-template-areas:
		"header header nav nav nav nav"
		"main main main main main aside"
		"pied pied pied pied pied pied";
	}
	.header {
	grid-area:header;
	background:#33FF8D;
	}
	.nav {
	grid-area:nav;
	background:#F1948A ;
	}
	.main {
	grid-area:main;
	background:#D2B4DE;
	}
	.footer {
	grid-area:pied;
	background:#F9E79F;
	}
	.aside {
	grid-area: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:

  • on attribue un nom à chaque enfant, le nom est au choix du programmeur
  • au niveau de l'élément parent de display grid on dispose les enfants en fonction de la grille définie

Au sein du grid-template-areas, chaque les area occupent un ensemble contigu !!! On ne peut par exemple coder ce qui suit, en effet les 2 aside ne sont pas contigus au sein du grid-template-areas.


...
	.container	{
	min-height:100vh;
	display:grid;
	grid-template-columns:repeat(6,1fr);
	grid-template-rows:100px 1fr 100px;
	grid-template-areas:
		"header header nav nav nav nav"
		"aside main main main main aside"
		"pied pied pied pied pied pied";
	}
...

Exemples

Gabarit 1 Démo
Gabarit 2 Démo
Gabarit 3 Démo