Informatique


Positionnement classique

Aller à

Règle générale:

  • les différents éléments de la page se dispose dans l'ordre dans lequel il se présente dans le DOM
  • les différents éléments se placent de gauche à droite en commençant par la première rangée, s'il n'y a pas assez de rangées celles-ci sont créées dynamiquement selon le même shéma que les lignes déjà définies
  • attention, le chevauchement est autorisé, aucun message d'erreur dans ce cas
  • les éléments non placés seront placés en fonction de leur place dans le DOM et en fonction de la place disponible dans la grille
  • plus la grille comptera de lignes et de colonnes plus la mise en page sera précise

Comme présenté sur le slide, chaque colonne et chaque ligne sont définies selon des axes verticaux ou horizontaux:

  • la première colonne commence à l'axe vertical 1 et se termine à l'axe vertical 2
  • la deuxième colonne commence à l'axe vertical 2 et se termine à l'axe vertical 3
  • la troisième colonne commence à l'axe vertical 3 et se termine à l'axe vertical 4
  • etc.
  • et de même pour les lignes


grid-row et grid-column

Pour disposer les éléments enfants d'une balise de display grid on utilise les propriétés grid-row et grid-column.

grid-row est la propriété abrégée des propriétés grid-row-start et grid-row-end.
grid-column est la propriété abrégée des propriétés grid-column-start et grid-column-end.

grid-row utilise 2 valeurs séparées par un slash (/):

  • le n° de ligne de départ
  • /
  • le n° de ligne d'arrivée

grid-column utilise 2 valeurs séparées par un slash (/):

  • le n° de colonne de départ
  • /
  • le n° de colonne d'arrivée

Réalisons le gabarit suivant:

Démo
<head>
<meta charset="UTF-8">
<style>
	body{margin:0;}
	.container	{
	display:grid;
	grid-template-columns:repeat(12,1fr);
	grid-template-rows:auto auto auto auto;
	}
	.header {
	min-height:10vh;
	background:#33FF8D;
	grid-row:1/3;
	grid-column:1/13;
	}
	.nav {
	min-height:5vh;
	background:#F1948A ;
	grid-row:3/4;
	grid-column:1/13;
	}
	.main {
	min-height:80vh;
	background:#D2B4DE;
	grid-row:4/5;
	grid-column:1/10;
	}
	.footer {
	min-height:5vh;
	background:#F9E79F;
	grid-row:5/6;
	grid-column:1/13;

	}
	.aside {
	background:#F2D7D5;
	grid-row:4/5;
	grid-column:10/13;

	}
</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:

  • la balise header s'étend sur 2 lignes et 12 colonnes
  • la balise nav s'étend sur 1 lignes et 12 colonnes
  • la balise main s'étend sur 1 lignes et 12 colonnes
  • la balise aside s'étend sur 1 lignes et 12 colonnes
  • la balise footer s'étend sur 1 lignes et 12 colonnes


Autres exemples à analyser

Gabarit 1 Démo
Gabarit 2 Démo
Gabarit 3 Démo
Gabarit 4 (avec span) Démo