Informatique


Organiser une grille

Aller à

Règle générale Organiser la grille grid-column grid-row grid-column et grid-row Un exemple Algorithme de placement dans la grille
 

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

Organiser la grille

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 et grid-column utilise 2 valeurs séparées par un slash (/):

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

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

  • le n° de ligne/colonne de départ
  • /
  • span n

grid-column

Réalisons le gabarit suivant:

Démo
<head>
<meta charset="UTF-8">
<style>
.carte{
	background-color:salmon;
	border:solid 1px #9ca3af;
	border-radius:5px;
}
.grille{
	display:grid;
	grid-gap:5px;
	grid-template-columns:repeat(5,minmax(50px,1fr));
	grid-template-rows:repeat(3,minmax(50px,auto));
}
.carte:nth-child(3){
	grid-column:3/5;
}
</style>
</head>
<body>
<div class=grille>
	<div class="carte">1</div>
	<div class="carte">2</div>
	<div class="carte">3</div>
	<div class="carte">4</div>
	<div class="carte">5</div>
	<div class="carte">6</div>
	<div class="carte">7</div>
	<div class="carte">8</div>
	<div class="carte">9</div>
	<div class="carte">10</div>
</div>

On constate:

  • la 3ième cellule a été étendue sur 2 colonnes
  • une cellule a été rajoutée implicitement, on constate que l'organisation explicite de la grille est respectée.

grid-row

Réalisons le gabarit suivant:

Démo
<head>
<meta charset="UTF-8">
<style>
.carte{
	background-color:salmon;
	border:solid 1px #9ca3af;
	border-radius:5px;
}
.grille{
	display:grid;
	grid-gap:5px;
	grid-template-columns:repeat(5,minmax(50px,1fr));
	grid-template-rows:repeat(3,minmax(50px,auto));
}
.carte:nth-child(3){
	grid-column:3/4; /*Indispensable*/
	grid-row:1/3;
}
</style>
</head>
<body>
<div class=grille>
	<div class="carte">1</div>
	<div class="carte">2</div>
	<div class="carte">3</div>
	<div class="carte">4</div>
	<div class="carte">5</div>
	<div class="carte">6</div>
	<div class="carte">7</div>
	<div class="carte">8</div>
	<div class="carte">9</div>
	<div class="carte">10</div>
</div>


</body>

On constate:

  • la 3ième cellule a été étendue sur deux lignes
  • grid-column:3/4; est indispensable, si on ne précise pas la colonne la cellule vient se placer en première position.
  • une cellule a été rajoutée implicitement, on constate que l'organisation explicite de la grille est respectée.

gride-column et grid-row

Réalisons le gabarit suivant:

Démo
<head>
<meta charset="UTF-8">
<style>
.carte{
	background-color:salmon;
	border:solid 1px #9ca3af;
	border-radius:5px;
}
.grille{
	display:grid;
	grid-gap:5px;
	grid-template-columns:repeat(5,minmax(50px,1fr));
	grid-template-rows:repeat(3,minmax(50px,auto));
}
.carte:nth-child(3){
	grid-column:3/5;
	grid-row:1/3;
}
</style>
</head>
<body>
<div class=grille>
	<div class="carte">1</div>
	<div class="carte">2</div>
	<div class="carte">3</div>
	<div class="carte">4</div>
	<div class="carte">5</div>
	<div class="carte">6</div>
	<div class="carte">7</div>
	<div class="carte">8</div>
	<div class="carte">9</div>
	<div class="carte">10</div>
</div>


</body>

On constate:

  • la 3ième cellule a été étendue sur deux lignes et deux colonnes
  • la 3ième cellule a été étendue sur deux lignes et deux colonnes
  • deux cellules ont été rajoutées implicitement, on constate que l'organisation explicite de la grille est respectée.

Un exemple

Réalisons le gabarit suivant:

Démo
<head>
<meta charset="UTF-8">
<style>
.carte{
	background-color:salmon;
	border:solid 1px #9ca3af;
	border-radius:5px;
}
.grille{
	display:grid;
	grid-gap:10px;
	grid-template-columns:repeat(12,1fr));
	grid-template-rows:repeat(4,minmax(50px,auto));
}
.carte:nth-child(1){
	grid-column:1/13; /*grid-column:1/-1*/
}
.carte:nth-child(2){
	grid-column:1/3;
	grid-row:2/4;
}
.carte:nth-child(3){
	grid-column:3/11;
}
.carte:nth-child(4){
	grid-column:11/13;
	grid-row:2/4;

}
.carte:nth-child(5){
	grid-column:3/11;
	grid-row:3/4;

}
.carte:nth-child(6){
	grid-column:1/13;
	grid-row:4/5;

}
</style>
</head>
<body>
<div class=grille>
	<div class="carte">1</div>
	<div class="carte">2</div>
	<div class="carte">3</div>
	<div class="carte">4</div>
	<div class="carte">5</div>
	<div class="carte">6</div>
</div>


</body>

On constate:

  • la 3ième cellule a été étendue sur deux lignes et deux colonnes
  • la 3ième cellule a été étendue sur deux lignes et deux colonnes
  • deux cellules ont été rajoutées implicitement, on constate que l'organisation explicite de la grille est respectée.

Algorithme de placement dans la grille

Trois choses à savoir:

  • par défaut, c'est grid-auto-flow qui place les éléments dans la grille selon les lignes ou les colonnes
  • les éléments en placement définis sont placés en priorité dans la grille, ensuite l'algorithme remplit les éléments dans les cellules.
  • Pour les éléments semi-définis:
    • si grid-row défini alors l'élément est placé prioritairement
    • si grid-column défini alors l'élément est placé en générant une nouvelle rangée si nécessaire, des espaces libres peuvent demeurer dans la rangée précédente
    • ce qui précède est inversé selon la valeur de grid-auto-flow (row ou column)

Pour éviter les mauvaises surprises il est préférable (au début!) de privilégier le placement défini, et donc de préciser sur quelles colonnes et quels lignes un élément doit être placé.