Css grid: Qu'est-ce qu'une vue en grille (grid-view)?

Qu'est-ce qu'une vue en grille (grid-view) ?

De nombreuses pages Web sont basées sur une vue en grille (grid-view), ce qui signifie que la page est divisée en colonnes  et rangées:

Une colonne est limitée par deux lignes verticales on parle de lignes de colonne.

Une rangée est limitée par deux lignes horizontales on parle de lignes de rangée

L'utilisation d'une vue en grille (grid-view)  est très utile lors de la conception de pages Web. Il permet de placer plus facilement les éléments sur la page.

Une vue en grille (grid-view)  réactive comporte souvent 12 colonnes, avec une largeur totale de 100 %, et se rétrécit et s'étend lorsque vous redimensionnez la fenêtre du navigateur.

Les mises en page en grille sont des outils clés pour la conception de sites Web, et le module CSS Grid est l'outil le plus puissant et le plus simple pour en créer. Je pense personnellement qu'il est bien meilleur par exemple que Bootstrap (lisez le cours sur Bootstrap ici).

Le module a également obtenu un support natif par les principaux navigateurs (Safari, Chrome, Firefox, Edge), donc je pense que tous les développeurs  devront apprendre cette technologie dans un avenir pas trop lointain.

1 Principes de base et support des navigateurs de CSS grid

En mars 2017, la plupart des navigateurs ont livré une prise en charge native et non figée de CSS Grid :

 Chrome (y compris sur Android ), Firefox, Safari (y compris sur iOS) et Opera. Internet Explorer 10 et 11, quant à lui, le prend en charge, mais il s'agit d'une ancienne implémentation avec une syntaxe dépassée.

Ordinateur

Chrome	Firefox	IE	Edge	Safari
57	52	11*	16	10.1

Mobile / Tablette

Android Chrome	Android Firefox	Android	iOS Safari
94	92	94	10.3

Dans ce premier chapitre, je vais vous faire découvrir les bases de CSS Grid aussi rapidement que possible. Je laisserai de côté tout ce dont vous ne devriez pas vous soucier tant que vous n'aurez pas compris les principes de base pour le second chapitre.

1.1 Votre première mise en page sous forme de grille

Les deux principaux ingrédients d'une grille CSS sont l'enveloppe ou conteneur  (parent) et les éléments contenus (enfants).

Le conteneur est la grille proprement dite et les éléments sont le contenu de la grille.

Voici le code html d’une enveloppe contenant six éléments :

Exemple :      Copier le code

<div class=" enveloppe">
  <div class=’enfant1’>1</div>
  <div class=’enfant2’>2</div>
  <div class=’enfant3’>3</div>
  <div class=’enfan4’>4</div>
  <div class=’enfant5’>5</div>
  <div class=’enfant6’>6</div>
</div>

Pour transformer notre div avec la class= " enveloppe"  en une grille, il suffit de définir la propriété css  display sur grid.

Code CSS
  Copier le code

. enveloppe {
Display:grid ;
}

J'ai ajouté un peu de style, mais cela n'a rien à voir avec la grille CSS. Mais si vous exécutez ce code il ne fait rien pour l'instant, car nous n'avons pas encore défini à quoi doit ressembler notre grille. Elle va simplement empiler les 6 div  l’uns au dessus de l’autre.

La propriété display peut prendre les valeures.

grid   génère une grille de niveau bloc

inline-grid   génère une grille de niveau ligne

1.2 Définir les colonnes et rangées: les propriétés grid-template-rows et grid-template-columns

Pour que la grille soit en deux dimensions, nous devons définir les colonnes et les rangées, en créant trois colonnes et deux rangées. Nous utiliserons les propriétés grid-template-rows et grid-template-columns.

grid-template-columns et grid-template-rows  deux propriétés  que nous utilisons pour indiquer à notre grille respectivement combien de colonnes et de rangées doivent exister. Elles acceptent toutes les unités de longueur que nous connaissons et aimons, telles que rem, em, px, pourcentages, vw, vh et fr.

Le fr est une nouvelle unité que nous obtenons avec CSS Grid Layout. Avec elle, nous pouvons demander au navigateur de faire des calculs à notre place, ce qui est excellent.

Code css pour définir les colonnes et rangées

Code CSS
  Copier le code

.enveloppe{
    display: grid;  
grid-template-columns: 100px 100px 100px;  
grid-template-rows: 50px 50px;
    grid-gap: 20px;
}

Comme nous avons écrit dans ce code css  trois valeurs pour grid-template-columns, nous obtiendrons trois colonnes.

Et nous obtiendrons deux rangées, vu que nous avons spécifié deux valeurs pour la propriété grid-template-rows.

Ces valeurs déterminent la largeur des colonnes (100px) et la hauteur des rangées (50px).

La propriété grid-gap quant à elle détermine l’espacement entre les éléments.

Et pour voir ce que donne la propriété grid-gap ajouter le code css qui donnera des bordures au éléments..

Code CSS
  Copier le code

.enfant1,.enfant2,.enfant3,.enfant4,.enfant5,.enfant6
{border: solid 1px #000;}

Dans le code ci-dessus nous avons une grille de 3x2 (trois colonnes et deux rangées).

1.3 positionner et redimensionner les éléments de la grille: les propriétés css grid-column et grid-row

Pour positionner et redimensionner les éléments de la grille, nous allons les cibler via l’attribut class ou id  de chaque élément et utiliser les propriétés css grid-column et grid-row.

Et ajouter le code  css au style de votre page .

Code CSS
  Copier le code

.enfant1 {
	grid-column-START: 1;
    grid-column-end: 4;
}

grid-column-START, grid-column-end, grid-row-START et grid-row-end déterminent l'emplacement d'un élément dans la grille en faisant référence à des lignes de grille spécifiques. grid-column-START/grid-row-START est la ligne où l'élément commence, et grid-column-end/grid-row-end est la ligne où l'élément se termine.

Dans notre code l'élément 1 doit commencer sur la première ligne de la grille et se terminer sur la quatrième ligne de la colonne. En d'autres termes, il occupera toute la rangée.

Vous ne comprenez peut être pas pourquoi nous avons 3 rangées alors que nous n'avons  définit que 2 ?

Remarquez que nous utilisons maintenant toutes les rangées de la grille.

 Lorsque nous avons fait en sorte que le premier élément occupe la totalité de la première rangée, cela a poussé les autres éléments vers le bas. Ce qui veut dire que nous pouvons ajouter autant de rangées et de colonne qu’on veut et fixer la largeur et |ou la hauteur de certains et laisser les autres sans la fixer. Donc pour les éléments dont on a fixé la largeur ou la hauteur serons limiter quand à leur contenu, mais à défaut on peut utiliser la propriété css overflow.

J'aimerais vous montrer une façon plus simple d'écrire la syntaxe ci-dessus :

Pour être sûr que vous avez bien compris ce concept, réorganisons un peu les éléments. Et essayiez ce code css.

Code
  Copier le code

.enfant1 {
    grid-column-START:1;
    grid-column-end:3;
}
.enfant3 {
    grid-row-START:2;
    grid-row-end: 4;
}
.enfant4 {
    grid-column-START:2;
    grid-column-end:4;
}

grid-column-START, grid-column-end, grid-row-START et grid-row-end peuvent prendre les valeurs.

<ligne> - peut être un nombre pour faire référence à une ligne de grille numérotée, ou un nom pour faire référence à une ligne de grille nommée.

span <nombre> - l'élément s'étendra sur le nombre fourni de pistes (colonnes ou rangées) de la grille.

span <nom> - le mot clé span signifie que l'élément s'étendra jusqu'à ce qu'il atteigne la ligne suivante portant le nom  fourni.

auto - indique un placement automatique, un span automatique ou un span par défaut de un.

Le raccourci grid-column et grid-row

Les propriétés grid-column et grid-row propose un raccourci respectivement  pour grid-column-start + grid-column-end, et  grid-row-start + grid-row-end, en remplaçant + par une ligne oblique / .

Si on écrit: « grid-column: 1/3 ;» cela signifier  (grid-column-start: 1 et grid-column-end:3)

Voir l’exemple ci-dessous enfant2.

1.3 Nommer les lignes de grilles

Comme vous avez pu le constater dans ce qui vient d’être dit plus haut, nous pouvons nommer les lignes d’une grille. Ce qui peut par fois être utile.

Voici un exemple qui montre comment nommer  les lignes.

Code CSS
  Copier le code

.enveloppe  {     display:grid;    
grid-template-columns:[première-line] 100px [second-line] 100px [troisième-line] 
100px [dernière-line];    
grid-template-rows: [ligne-depart] 50px [ligne-mediane1] 50px [ligne-mediane2]
50px [ligne-mediane3] 50px [ligne-finale] ;       grid-gap: 10px;   } 
.enfant1,.enfant2,.enfant3,.enfant4,.enfant5,.enfant6
{border: solid 1px #000;} 
.enfant1 {    
	grid-column-start: 1;
	grid-column-end:troisième-line; } 
.enfant2 {
     grid-column: 3 /4;
     grid-row: 1/span4; }   
.enfant3 {
    grid-column-start:première-line;
    grid-column-end: troisième-line;
    grid-row-start:ligne-mediane1;
    grid-row-end:ligne-mediane2; }   
.enfant4 {    
	grid-column-start: première-line;
    grid-column-end:troisième-line;
    grid-row-start:ligne-mediane2; 
    grid-row-end:ligne-mediane3; }

Et voila vous pouvez nommer les lignes comme vous voulez il suffit de mettre le nom désiré entre crochets et de le placé la où il faut, et maintenant au lieu d’utiliser les numéros de lignes on peut utiliser les noms ou combiner les deux.

1.4 les propriétés grid-template-areas et grid area

1) La propriété grid-template-areas définit un modèle de grille en se référant aux noms des zones de la grille qui sont spécifiées avec la propriété grid-area. Si le nom d'une zone de grille est répété, le contenu s'étend sur ces cellules. Un point signifie une cellule vide. La syntaxe elle-même permet de visualiser la structure de la grille.

<grid-area-name> - nom d'une zone de grille spécifiée avec grid-area.

. - un point signifie une cellule de grille vide

none - aucune zone de grille n'est définie

2) La propriété grid-area donne à un élément un nom afin qu'il puisse être référencé par un modèle créé avec la propriété grid-template-areas et c’est pour quoi dans l’exemple j’ai défini dans le code de style css les noms des éléments enfant avant le code css du parent enveloppe. Cette propriété peut également être utilisée comme un raccourci encore plus court de

grid-row-start + grid-column-start + grid-row-end + grid-column-end.

<nom> - un nom de votre choix

<row-start> / <column-start> / <row-end> / <column-end> - peuvent être des nombres ou des lignes nommées.

Exemple

Code
  Copier le code

	
<!DOCTYPE html> 
<html> 
<head> 
<style> 
.enfant1 { 
  grid-area: header; 
}.enfant2 { 
  grid-area: main; 
} 
.enfant3 { 
  grid-area: sidebar; 
} 
.enfant4 { 
  grid-area: footer; 
} 
.enveloppe { 
  display: grid; 
  grid-template-columns: 50px auto 50px 300px; 
  grid-template-rows: repeat(3, 50px); 
  grid-template-areas:  
    "header header header header" 
    "main main . sidebar" 
    "footer footer footer footer"; 
    grid-gap: 10px; 
} 
.enfant1,.enfant2,.enfant3,.enfant4 {border: solid 1px
#000;} 
</style> 
</head> 
<body> 
<div class=" enveloppe "> 
  <div
class="enfant1">enfant1</div> 
  <div
class="enfant2">enfant2</div> 
  <div class="enfant3">enfant3</div> 
  <div
class="enfant4">enfant4</div> 
</div> 
  
</body> 
</html> 

Cela créera une grille de quatre colonnes de large sur trois rangées de haut. La rangée supérieure sera entièrement composée de la zone d'en-tête. La rangée du milieu sera composée de deux zones principales, d'une cellule vide et d'une zone de barre latérale. La dernière rangée est entièrement consacrée au pied de page.

Chaque rangée de votre déclaration doit comporter le même nombre de cellules.

Vous pouvez utiliser un nombre quelconque de points adjacents pour déclarer une seule cellule vide. Tant que les points ne sont pas séparés par des espaces, ils représentent une seule cellule.

Notez qu’avec cette syntaxe,  vous ne nommez pas les lignes mais uniquement les zones.

Lorsque vous utilisez cette syntaxe, les lignes situées à chaque extrémité des zones sont en fait nommées automatiquement.

Si le nom de votre zone de grille est foo, le nom de la première ligne et de la première colonne de la zone sera foo-start, et le nom de la dernière ligne et de la dernière colonne sera foo-end. Ce qui signifie que certaines lignes peuvent avoir plusieurs noms, comme la ligne la plus à gauche dans l'exemple ci-dessus, qui aura trois noms : header-start, main-start et footer-start.

1.5 grid-auto-columns et grid-auto-rows

Spécifie la taille de toutes les pistes de grille générées automatiquement (aussi appelées pistes de grille implicites). Les pistes implicites sont créées lorsqu'il y a plus d'éléments de grille que de cellules dans la grille ou lorsqu'un élément de grille est placé en dehors de la grille explicite. (voir La différence entre les grilles explicites et implicites).

<track-size> - peut être une longueur, un pourcentage ou une fraction de l'espace libre dans la grille (en utilisant l'unité fr).

Pour illustrer comment les pistes de la grille implicite sont créées, imaginez que vous avez :

Code
  Copier le code

.enveloppe { 
  display: grid; 
  grid-template-columns: 60px 60px; 
  grid-template-rows: 90px 90px; 
} 

Ce qui crée une grille de deux colonnes et deux rangées.

Mais supposons maintenant que vous utilisiez grid-column et grid-row pour positionner vos éléments de grille :

Code
  Copier le code

.enfant1,.enfant2 {border: solid 1px #000;} 
.enfant1 { 
  grid-column: 1 / 2; 
  grid-row: 2 / 3; 
} 
.enfant2 { 
  grid-column: 5 / 6; 
  grid-row: 2 / 3; 
} 

Nous demandons à la colonne .item-b de commencer à la ligne 5 et de se terminer à la ligne 6, mais nous n'avons jamais défini de ligne de colonne 5 ou 6. Comme nous avons référencé des lignes qui n'existent pas, des pistes implicites d'une largeur de 0 sont créées pour combler les vides ce qui donne:

Nous pouvons utiliser grid-auto-columns et grid-auto-rows pour spécifier les largeurs de ces pistes implicites , ce qui donne ?

Code
  Copier le code

.enveloppe { 
  display: grid; 
 grid-auto-columns : 60px ; 
  grid-template-rows: 90px 90px; 
} 

1.6 La propriété grid-auto-flow

Si vous avez des éléments de grille que vous ne placez pas explicitement sur la grille, l'algorithme de placement automatique intervient pour placer automatiquement les éléments. La propriété grid-auto-flow permet de contrôler le fonctionnement de l'algorithme de placement automatique.

row - indique à l'algorithme d'auto-placement de remplir chaque ligne successivement, en ajoutant de nouvelles lignes si nécessaire (valeur par défaut).

column - indique à l'algorithme d'auto-placement de remplir chaque colonne à tour de rôle, en ajoutant de nouvelles colonnes si nécessaire.

dense - indique à l'algorithme de placement automatique qu'il doit tenter de remplir les trous plus tôt dans la grille si des éléments plus petits apparaissent plus tard.

Notez que dense ne modifie que l'ordre visuel de vos éléments et peut les faire apparaître dans le désordre, ce qui est mauvais pour l'accessibilité.

Exemples :

Essayez  ce code HTML + CSS :

Code
  Copier le code

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.enveloppe { 
  display: grid; 
  grid-template-columns: 60px 60px 60px 60px 60px; 
  grid-template-rows: 30px 30px; 
  grid-auto-flow: row; 
} 
.enfant1,.enfant2,.enfant3,.enfant4,.enfant5 {border:
solid 1px #000;} 
.enfant1 { 
   grid-column: 1; 
  grid-row: 1 / 3; 
} 
.enfant5 { 
  grid-column: 5; 
  grid-row: 1 / 3; 
} 

</style> 
</head> 
<body> 
<div class=" enveloppe "> 
  <div class="enfant1">enfant1
</div> 
  <div class="enfant2">enfant2
</div> 
  <div class="enfant3">enfant3
</div> 
  <div class="enfant4">enfant4
</div> 
  <div
class="enfant5">enfant5</div> 
</div> 
</body> 
</html> 

Vous définissez une grille avec cinq colonnes et deux rangées, et définissez le flux automatique de la grille sur la rangée (qui est également la valeur par défaut).

Lorsque vous placez les éléments sur la grille, vous ne spécifiez des emplacements que pour deux d'entre eux.

Comme nous avons réglé la propriété  grid-auto-flow sur row, les trois éléments que nous n'avons pas placés (enfant2, enfant3 et enfant4) se répartissent sur les lignes disponibles .

Maintenant changez le réglage de la propriété  grid-auto-flow et mettez le sur column: grid-auto-flow: column;

1.7 La propriété grid

La propriété grid est un raccourci permettant de définir toutes les propriétés suivantes dans une seule déclaration : grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns et grid-auto-flow (Remarque : vous ne pouvez spécifier que les propriétés de grille explicites ou implicites dans une seule déclaration de grille).

Valeurs   de la propriété grid :

none - définit toutes les sous-propriétés à leurs valeurs initiales.

<grid-template> - fonctionne de la même manière que le raccourci grid-template.

<grid-template-rows> / [ auto-flow && dense ? ] <grid-auto-columns> ? - définit grid-template-rows à la valeur spécifiée. Si le mot-clé auto-flow est à droite de la barre oblique, il définit grid-auto-flow à column. Si le mot-clé dense est spécifié en plus, l'algorithme de placement automatique utilise un algorithme d'empaquetage "dense". Si grid-auto-columns est omis, il est défini sur auto.

[ auto-flow && dense ? ] <grid-auto-rows> ? / <grid-template-columns> - définit grid-template-columns à la valeur spécifiée. Si le mot-clé auto-flow est à gauche de la barre oblique, il définit grid-auto-flow à row. Si le mot-clé dense est spécifié en plus, l'algorithme de placement automatique utilise un algorithme d'empaquetage "dense". Si grid-auto-rows est omis, il est défini sur auto.

Exemples :

Les deux blocs de code suivants sont équivalents :

1.8 Propriétés column-gap row-gap, grid-column-gap et grid-row-gap

Espace entre les colonnes, espace entre les lignes

Les propriétés  column-gap row-gap, grid-column-gap et grid-row-gap  spécifient  l’espace entre des lignes de la grille dans le sens des colonnes et des rangées. Vous pouvez l'assimiler à la définition de la largeur des espaces  entre les colonnes et les espaces entre les rangées.

<taille de la ligne> - une valeur de longueur (nombre).

Exemple:

Code
  Copier le code

.enveloppe { 
  grid-template-columns: 100px 50px 100px; 
  grid-template-rows: 80px auto 80px;  
  column-gap: 10px; 
  row-gap: 15px; 
} 

Les espaces ne sont créées qu'entre les colonnes ou rangées, pas sur les bords extérieurs.

Remarque : le préfixe grid- sera supprimé et les propriétés grid-column-gap et grid-row-gap seront renommées column-gap et row-gap.

Les propriétés sans préfixe sont déjà prises en charge dans Chrome 68+, Safari 11.2 Release 50+, Microsoft Edge 93+  et Opera 54+.

Gap et grid-gap

La propriété gap ou grid-gap est un raccourci de row-gap et column-gap.

Valeurs de la propriété gap ou grid-gap:

<grid-row-gap> <grid-column-gap> - valeurs de longueur (nombre).

Exemple de la propriété gap :

Code
  Copier le code

enveloppe { 
  grid-template-columns: 100px 50px 100px; 
  grid-template-rows: 80px auto 80px;  
  gap: 15px 10px; 
} 

Noter que si on donne une seule valeur elle sera appliquée pour les colonnes et les rangées.

1.9 la propriété justify-items

la propriété justify-items  aligne les éléments de la grille sur l'axe des lignes(rangées)  (par opposition à align-items qui aligne sur l'axe des blocs (colonnes)). Cette valeur s'applique à tous les éléments de la grille à l'intérieur du conteneur.

start - aligne les éléments de manière à ce qu'ils soient alignés avec le bord de départ (à gauche) de leur cellule.

end - aligne les éléments de manière à ce qu'ils soient alignés sur le bord d'extrémité à droite de leur cellule

center - aligne les éléments au centre de leur cellule.

stretch - remplit toute la largeur de la cellule (valeur par défaut).

Exemple de la propriété justify-items  :

Code
  Copier le code

Enveloppe { 
  justify-items: start; 
} 

Ce comportement peut également être défini sur des éléments individuels de la grille par la propriété justify-self.

1.10 La propriété justify-self

La propriété justify-self aligne un élément de grille dans une cellule selon l'axe des lignes (par opposition à align-self qui aligne selon l'axe des blocs (colonnes)). Cette valeur s'applique à un élément de grille situé dans une seule cellule.

Valeurs de la propriété justify-self:

start - aligne l'élément de la grille de manière à ce qu'il soit au même niveau que le bord de départ (gauche) de la cellule.

end - aligne l'élément de la grille de manière à ce qu'il soit au même niveau que le bord final (à droite) de la cellule.

center - aligne l'élément de la grille sur le centre de la cellule.

stretch - remplit toute la largeur de la cellule (valeur par défaut).

Exemple de la propriété justify-self:

Code
  Copier le code

Enfant1 { 
  justify-self: center; 
} 

Notez que pour définir l'alignement de tous les éléments d'une grille, ce comportement peut être défini sur le conteneur de la grille par la propriété justify-items vu plus haut.

1.11 La propriété align-self

Aligne un élément de grille dans une cellule selon l'axe du bloc (colonne) (par opposition à justify-self qui aligne selon l'axe de la rangée). Cette valeur s'applique au contenu d'un seul élément de grille.

start - aligne l'élément de la grille de manière à ce qu'il soit au même niveau que le bord de départ (supérieur) de la cellule.

end - aligne l'élément de la grille de manière à ce qu'il affleure le bord de fin (inferieur)  de la cellule

center - aligne l'élément de la grille au centre de la cellule.

stretch - remplit toute la hauteur de la cellule (valeur par défaut).

Exemple de la propriété align-self :

Code
  Copier le code

Enfant2 { 
  align-self: end; 
} 

Pour aligner tous les éléments d'une grille, ce comportement peut également être défini sur le conteneur de la grille via la propriété align-items.

1.12 La propriété align-items.

La propriété align-item aligne les éléments de la grille sur l'axe du bloc (colonne) (par opposition à justify-items qui s'aligne sur l'axe de la ligne (rangée)). Cette valeur s'applique à tous les éléments de la grille à l'intérieur du conteneur.

start - aligne les éléments de manière à ce qu'ils soient alignés sur le bord de départ de leur cellule.

end - aligne les éléments de manière à ce qu'ils soient alignés avec le bord de fin de leur cellule

center - aligne les éléments au centre de leur cellule.

stretch - remplit toute la hauteur de la cellule (valeur par défaut).

Exemple:

Ce comportement peut également être défini sur des éléments individuels de la grille par l'intermédiaire de la propriété align-self.

1.13 La propriété place-items

place-items définit à la fois les propriétés align-items et justify-items dans une seule déclaration.

Valeurs de la propriété align-self :

<align-items> / <justify-items> - La première valeur définit align-items, la seconde justifie-items. Si la deuxième valeur est omise, la première valeur est attribuée aux deux propriétés.

Tous les principaux navigateurs, à l'exception de Edge, prennent en charge la propriété abrégée

place-items.

Pour plus de détails, voir align-items et justify-items.

Cela peut être très utile pour un centrage multidirectionnel très rapide :

Exemple:

Code
  Copier le code

enveloppedisplay: grid; 
 place-items: center/start; 

1.14 La propriété justify-content

La propriété justify-content

Parfois, la taille totale de votre grille peut être inférieure à la taille de son conteneur. Cela peut se produire si tous les éléments de votre grille sont dimensionnés avec des unités non flexibles comme les px. Dans ce cas, vous pouvez définir l'alignement de la grille dans le conteneur de la grille en utilisant la propriété justify-content.

 La propriété justify-content aligne la grille sur l'axe des rangées (par opposition à align-content qui aligne la grille sur l'axe des colonnes).

Valeurs de la propriété justify-content:

start - aligne la grille de manière à ce qu'elle soit au même niveau que le bord de départ du conteneur de la grille (bord gauche) .

end - aligne la grille de manière à ce qu'elle affleure le bord d'extrémité du conteneur de grille (bord droit).

center - Aligne la grille au centre du conteneur de la grille.

stretch - redimensionne les éléments de la grille pour qu'elle occupe toute la largeur du conteneur.

space-around (espace autour) - place une quantité égale d'espace entre les éléments de la grille, avec des espaces de taille réduite de moitié sur les extrémités.

space-between - place une quantité égale d'espace entre les éléments de la grille, sans espace aux extrémités.

space-evenly - place une quantité égale d'espace entre les éléments de la grille, y compris les extrémités.

Exemple:

Code
  Copier le code

enveloppe { 
 justify-content: start;    
} 

1.15 La propriété align-content

Parfois, la taille totale de votre grille peut être inférieure à la taille de son conteneur. Cela peut se produire si tous les éléments de votre grille sont dimensionnés avec des unités non flexibles comme les px. Dans ce cas, vous pouvez définir l'alignement de la grille dans le conteneur de la grille en utilisant la propriété align-content.

La  propriété align-content aligne la grille sur l'axe des colonnes (par opposition à justify-content qui aligne la grille sur l'axe des rangées).

Valeurs la  propriété align-content :

start - aligne la grille de manière à ce qu'elle soit au même niveau que le bord de départ du conteneur de la grille.

end - aligne la grille sur le bord de fin du conteneur de grille

center - Aligne la grille au centre du conteneur de la grille.

stretch - redimensionne les éléments de la grille pour qu'elle occupe toute la hauteur du conteneur.

space-around (espace autour) - place une quantité égale d'espace entre les éléments de la grille, avec des espaces de taille réduite de moitié sur les extrémités.

space-between - place une quantité égale d'espace entre les éléments de la grille, sans espace aux extrémités.

space-evenly - place une quantité égale d'espace entre les éléments de la grille, y compris les extrémités.

Exemple:

Code
  Copier le code

enveloppe { 
align-content: start;     
} 

1.16 La propriété place-content

place-content est un raccourci qui définit à la fois les propriétés align-content et justify-content dans une seule déclaration.

Valeurs de la propriété  place-content:

<align-content> / <justify-content> - La première valeur définit la propriété align-content, la seconde la propriété justify-content. Si la deuxième valeur est omise, la valeur donnée est attribuée aux deux propriétés.

Tous les principaux navigateurs, à l'exception de Edge, prennent en charge la propriété abrégée place-content.

Pour plus de détails, voir align-content et justify-content ci-haut.

1.17 La propriété place-self

La propriété place-self est un raccourci qui définit à la fois la propriété align-self et la propriété justify-self dans une seule déclaration.

Valeurs de la  propriété place-self:

auto - L'alignement "par défaut" pour le mode de mise en page.

<align-self> / <justify-self> - La première valeur définit align-self, la seconde justify-self. Si la deuxième valeur est omise, la première valeur est attribuée aux deux propriétés.

Exemples :

Code
  Copier le code

Enfant3 { 
  place-self: center stretch; 
} 

2 Unités et fonctions spéciales

2.1 L’unités fr

Vous utiliserez probablement beaucoup d'unités fractionnaires dans CSS Grid, comme 1fr. Elles signifient essentiellement "portion de l'espace restant". Ainsi, une déclaration comme :

grid-template-columns : 1fr 3fr ;

signifie, en gros, 25% 75%. Sauf que ces valeurs en pourcentage sont beaucoup plus fermes que les unités fractionnaires.

Par exemple, si vous ajoutez du remplissage à ces colonnes basées sur des pourcentages, vous avez cassé la largeur de 100 % (en supposant un modèle de boîte à contenu). Les unités fractionnaires sont également beaucoup plus conviviales en combinaison avec d'autres unités, comme vous pouvez l'imaginer :

grid-template-columns : 50px min-content 1fr ;

2 .1 Mots-clés de dimensionnement

Lorsque vous dimensionnez des lignes et des colonnes, vous pouvez utiliser toutes les longueurs auxquelles vous êtes habitué, comme px, rem, %, etc, mais vous disposez également de mots-clés :

min-content : la taille minimale du contenu. Imaginez une ligne de texte comme "Le très long hotdog.", le contenu minimum est probablement la largeur du monde "Le".

max-conent : la taille maximale du contenu. Imaginez la phrase ci-dessus, le max-content est la longueur de la phrase entière.

auto : ce mot-clé ressemble beaucoup aux unités fr, sauf qu'il "perd" la bataille du dimensionnement contre les unités fr lors de l'allocation de l'espace restant.

fit-content : utiliser l'espace disponible, mais jamais moins que le min-content et jamais plus que le max-contenu.

Les unités fractionnaires : voir ci-dessus.

2.2 Fonctions de dimensionnement

La fonction minmax() correspond exactement à ce que son nom indique : elle définit une valeur minimale et maximale pour la longueur maximale. Cette fonction est utile en combinaison avec des unités différente. Par exemple, vous pouvez vouloir qu'une colonne ne puisse se rétrécir que d'une certaine distance. C'est extrêmement utile et c'est probablement ce que vous voulez :

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

La fonction minmax() est un raccourci des fonctions

La fonction min() qui renvoie la valeur minimum et la fonction max()qui renvoie la valeur maximum.

2.3 La fonction repeat()

La fonction repeat() permet d'éviter la saisie de données :

Code
  Copier le code

grid-template-columns :  1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
1fr ; 
/* plus facile : */ 
grid-template-columns :  repeat(8, 1fr) ; 
/* surtout quand : */ 
grid-template-columns :  repeat(8, minmax(10px, 1fr)) ; 

Mais repeat() peut devenir très sophistiqué lorsqu'il est combiné aux mots-clés :

auto-fill : Ajoute autant de colonnes que possible sur une ligne, même si elles sont vides.

auto-fit : Ajuster toutes les colonnes possibles dans l'espace. Préférez les colonnes en expansion pour remplir l'espace plutôt que les colonnes vides.

grid-template-columns :   repeat(auto-fit, minmax(250px, 1fr)) ;

La différence entre les mots-clés est expliquée en détail ici.

2.4 Subgrid

La sous-grille est une fonctionnalité extrêmement utile des grilles qui permet aux éléments de la grille d'avoir leur propre grille qui hérite des lignes de la grille mère.

Code
  Copier le code

.parent-grid { 
  display : grid ; 
  grid-template-columns : repeat(9, 1fr) ; 
} 
.grid-item { 
  grid-column : 2 / 7 ; 

  affichage : grille ; 
  grid-template-columns : subgrid ; 
} 
.child-of-grid-item { 
  /* doit participer à la grille parent ! */ 
  grid-column : 3 / 6 ; 
} 

Ceci n'est supporté que dans Firefox pour l'instant, mais il faut vraiment que cela se généralise.

Il est également utile de connaître la fonction display : contents ;. Ce n'est pas la même chose que subgrid, mais cela peut être un outil utile parfois de manière similaire.

Code
  Copier le code

<div class="grid-parent"> 

  <div class="grid-item"></div> 
  <div class="grid-item"></div> 

  <ul style="display : contents ;"> 
    <!-- Ces éléments de la grille doivent participer à la la même grille!--> 
    <li class="grid-item"></li> 
    <li class="grid-item"></li> 
  </ul> 

</div>