Table des matièresLe petit dernier : Grid Layout

Ce cours est tiré des articles suivants :

Voulez-vous jouer à la bataille navale ?

Définir une grille avec des lignes et des colonnes, ....

Puis on fait correspondre des éléments variés avec les cases de la grille, et chacun tire à son tour...."D7 touché"

L'idée de Grid Layout est à peu près la même et rend ainsi totalement indépendant le contenu html de sa mise en place sur la grille.

Grid Layout Versus Flexbox :

On pourrait renacler: "encore un attribut pour la mise en page, cela fait le 6ème que l'on étudie dans ce cours ????? "

Le grid Layout a été explicitement créé pour la mise en plage des documents alors que flexbox est surtout adapté pour gérer des composants plus petits de la page.

Clairement le flexbox gère très bien une dimension à la fois et permet de laisser la main au moteur de rendu du navigateur. Contrairement au Grid Layout qui gère cette fois les 2 dimensions à la fois mais au prix d'un effort de réflexion de l'intégateur en amont.

https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/

Responsive

Un template pour chaque dimension de l'écran permet d'adapter la page sans rien modifier d'autre. C'est redoutablement puissant pour un responsive sans douleur.

Entrons dans le vif du Sujet

Définition à l'aide de grid-column et grid-row

Exemple

4 cellules

<div class="container">
<nav>nav</nav>
<section>section</section>
<article>article</article>
<aside>aside</aside>
</div>
.container {
  display: grid;
  grid-template-columns: 250px 400px;
  grid-template-rows: 100px 300px;
}
nav {
  grid-column: 1; grid-row: 1;
}
section {
  grid-column: 2; grid-row: 1;
}
article {
  grid-column: 1; grid-row: 2;
}
aside {
  grid-column: 2; grid-row: 2;
}

La méthode :

  1. grid-template-columns et grid-template-rows définissent la grille en spécifiant la largeur des colonnes et la hauteurs des lignes.
  2. grid-column et grid-row définissent le placement de chaque élément sur la grille (à l'image d'un tir de bataille navale)

II Définition par template : grid-template-areas

Exemple

Une pagination

<div class="container">
<header>header</header>
<nav>nav</nav>
<article>article</article>
<footer>footer</footer>
</div>
.container {
  display: grid;
  grid-template-columns: 10em 1fr;
  grid-template-areas: "x1 x1"
                       "y1 y2"
                       "z1 z1";
}
header {
  grid-area: x1;
}
nav {
  grid-area: y1;
}
article {
  grid-area: y2;
}
footer {
  grid-area: z1;
}

La méthode :

  1. grid-template-areas définit un pattern
  2. grid-area définit pour chaque élément sa place dans ce pattern

III Propriétés

Syntaxe CSS

Propriétés du contexte :

Propriété Fonction
grid, inline-grid
déclaration d'un contexte de grille (création d'un "grid-container")
grid-template-areas
déclaration d'un "canevas" de cellules nommées (optionnel)
grid-template-rows, grid-template-columns
déclaration des dimensions de lignes et colonnes
grid-gap, grid-column-gap, grid-row-gap
espaces inter-colonnes ou inter-rangées (gouttières)

Propriétés des items:

Propriété Fonction valeurs
grid-row, grid-column
placement d'un élément "grid-item" dans une ligne
ou une colonne
suivant template
align-items, justify-items
alignement horizontal ou vertical (s'applique au contexte) start, end , center, stretch
align-self, justify-self
alignement horizontal ou vertical d'éléments distincts (s'applique aux items) start, end , center, stretch

Afin que l'ensemble occupe toute la hauteur, déclarons le <body> comme un flex container, avec un axe "vertical" flex-direction à "column".

IV Les unités

Une nouvelle unité "fr" fraction(s) de l'espace restant : le moteur de rendu réparti l'espace restant en autant de "fr" demandés.

Syntaxe CSS
Unité Détails
px, %, em, ex, rem,… pixels, pourcentages, em,… (unités courantes)
fr fraction(s) de l'espace restant
min-content

Sur une ligne : largeur la plus petite du contenu des items de la ligne (track)
Sur une colonne : hauteur la plus petie du contenu des items de la colonne (track)

max-content Comme ci-dessus en changeant "la plus petite" en "la plus grande"
minmax(min, max) exemple minmax(min-content, 20%) correspond à largeur 20% (ou hauteur), mais au minimum largeur (ou hauteur) du contenu
auto s'adapte à la largeur (ou hauteur) du contenu
fit-content identique à auto et aussi à minmax(min-content, max-content)

Les unités demandent des précisions, nous allons les mettre en oeuvre pour mieux les comprendre.

Exemple

Unité fr fraction(s) de l'espace restant (flex)

<div class="mon_contexte">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
* {box-sizing:border-box;}
.mon_contexte {
	width:300px;
	display:grid;
	grid-template-columns:3fr 2fr 1fr;
}
.mon_contexte div {
	border-radius: 3px;
	border:1px solid #999;
	font-size:120%
}
.mon_contexte div:nth-child(odd){
	background-color:#999;
	color:#fff;
}

minmax(min, max)

En créant une grille, on peut souhaiter que les rangées ne soient jamais moins hautes que 100 pixels, mais qu'elles aillent jusqu'à 300 pixels de haut si le contenu le nécessite. C'est le rôle de minmax() :

Exemple

minmax(min, max)

<div class="mon_contexte">
<div>1</div>
<div>2</div>
<div>3</div>

</div>
* {box-sizing:border-box;}
.mon_contexte {
 width:30%;
 display:grid;
 grid-template-columns: 
     minmax(100px, 200px) 1fr 1fr;
}
.mon_contexte div {
 border-radius: 3px;
 border:1px solid #999;
 font-size:120%;
 text-align:center;
}

Suivant la largeur disponible, la colonne sera au maximum de 200px, au minimum de 100px. Les deux dernières colonnes se partagent le restant.

Exemple

max-content et min-content

<div class="mon_contexte">
<div>1</div>
<div>222 222 222 </div>
<div>3</div>
<div>1</div>
<div>2222 222 222 222 222</div>
<div>3</div>
</div>
* {box-sizing:border-box;}
.mon_contexte {
	width:30%;
	display:grid;
	grid-template-columns: 
1fr minmax(100px, max-content) 1fr; } .mon_contexte div { border-radius: 3px; border:1px solid #999; font-size:120%; text-align:center; } .mon_contexte div:nth-child(odd){ background-color:#999; color:#fff; }

min-content


grid-template-columns: 1fr minmax(100px, min-content)  1fr;

max-content


grid-template-columns:1fr minmax(100px, max-content)  1fr;

V Alignement des items

Webographie : https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_bo%C3%AEtes_avec_les_grilles_CSS

Exemple

align-items: start;

<div class="wrapper">
 <div class="item1">
	Objet 1
 </div>
 <div class="item2">
	Objet 2
 </div>
 <div class="item3">
	Objet 3
 </div>
 <div class="item4">
	Objet 4
 </div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: 
             repeat(8, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas: 
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
  align-items: start;
}
.item1 { grid-area: a; }
.item2 { grid-area: b; }
.item3 { grid-area: c; }
.item4 { grid-area: d; }
Exemple

align-self

<div class="wrapper">
 <div class="item1">
	Objet 1
 </div>
 <div class="item2">
	Objet 2
 </div>
 <div class="item3">
	Objet 3
 </div>
 <div class="item4">
	Objet 4
 </div>
</div>
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
  align-self: start;
}
.item3 {
  grid-area: c;
  align-self: end;
}
.item4 {
  grid-area: d;
  align-self: center;
}

VI Responsive

Il suffit de conditionner le template avec des media query

.container {
  display: grid;
  grid-template-areas: "a b" "c d";
  grid-template-columns: repeat(4, 1fr)
}

/* Responsive */
@media (max-width: 640px) {
  .container {
    grid-template-areas: "a" "d" "b" "c";
    grid-template-columns: 1fr;
  }
}
Entrainement

Pagination adaptative de une à trois colonnes en utilisant grid-template-areas

A vous de complèter grid-template-columns et grid-template-areas pour obtenir les 3 paginations suivantes suivants les largeurs de l'écran (<500px, 500<ecran<700, >700). Reprendre la page la page à complèter ici.

.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-areas: 
    "header"
    "nav"
    "content"
    "sidebar"
    "ad"
    "footer";
}
@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: /* completer ici */
    grid-template-areas: /* completer ici */
   
  }
  nav ul {
    display: flex;
    justify-content: space-between;
  }
}
@media (min-width: 700px) {
  .wrapper {
    grid-template-columns: /* completer ici */
    grid-template-areas: /* completer ici */
   }
   nav ul {
     flex-direction: column;
   }
}