CSS grid – Galerie responsive

La propriété CSS grid permet de réaliser des mises en pages responsive,  efficacement, rapidement et d’ajuster facilement les différents éléments de vos pages.

Apprenez à créer une galerie responsive avec des images de dimensions différentes.

Débuter avec CSS grid

Pour commencer il faut appréhender le fonctionnement de la règle CSS et la première étape est de définir l’affichage la grille (display : grid). Utilisons le modèles initial présenté par Harald Borgen dans le tutoriel publié sur Scrimba. Cette base sera utilisé par la suite pour expérimenter les propriétés spécifique aux fonction d’affichage en grille (grid)

je ne fait que traduire le tutoriel pour les anglophobes, je vous invite à consulter la source directement si vous êtes à l’aise avec le langue de Shakespeare.

Tuto vidéo par Harald Borgen

<div class="demo">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   <div>6</div>
</div>

Pour le moment point de grille. Nos ‘div’ se comportent donc comme des blocs et prennent l’ensemble de la ligne.

1
2
3
4
5
6

Des colonnes et des lignes

Le concept et simple et assez cohérent, une grille c’est bien un ensemble de colonnes et de lignes. Détails qui aura sont importance plus tard il faut bien imaginer la disposition des éléments dans cet ordre.

Les colonnes constituent les lignes.

Les éléments primordiaux et leurs syntaxes.

.container {
   display: grid;
   grid-template-columns: 100px auto 100px;
   grid-template-rows: 50px 50px;
}

grid-template-columns : Ici nous définissons la trame des colonnes. en assignant 3 valeurs on défini 3 colonnes. La première et la derniéres colonnes on une largeur de 100px et celle du milieu prend l’espace disponible.

grid-template-rows : On définit la hauteur des lignes. les deux lignes aurons une hauteur de 50px.

1
2
3
4
5
6

Voila pour la base. Avec les deux propriétés que nous venu d’observer, il est possible de facilement modifier la disposition des éléments. Exemple :

.container {
   display: grid;
   grid-template-columns: auto 100px;
   grid-template-rows: 50px auto 50px;
}
1
2
3
4
5
6

Fractions et répétitions

En comparaison des média-queries le système et déjà plus facile à mettre en oeuvre. Avec seulement 3 propriétés le responsive est déjà fonctionnel et sans allez se référer à un framework ni en étudiant les différentes format d’écran et leurs dimentions.

Mais c’est encore un peu rigide, pour avoir un rendu optimal utiliser des valeurs en pixel, n’est pas une bonne solution. Il faut préférer des valeurs relative pour vous adapter efficacement au média de lecture.

Fractions (xfr)

grid-template-columns: 1fr 1fr 1fr;
grid-gap: 3px;

Ici on utilse ‘1fr‘ pour définir une fraction. Utilisé 3 fois cela crée donc 3 colonnes.

A lire  Effet SCSS

Grid-gap défini l’espace entre les éléments.

1
2
3
4
5
6
grid-template-columns: 2fr 5fr 1fr;
1
2
3
4
5
6

Le système défini automatiquement les dimensions en fonctions du nombre total de fractions déclaré.

Répétitions

Dans le premier exemple on répéte 1fr 3 fois. Les répétitions avec CSS grid permettent de facilement créer des grilles et seront indispensable pour la suite 😉

grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 50px);
1
2
3
4
5
6

Repeat a besoins de 2 paramètres (3, 1fr) :

  • 3 est le nombre d’occurrence.
  • 1fr la valeur à répéter.

Encore plus simple

Pour encore simplifier la rédaction la propriété grid-template permet de regrouper les lignes précédentes.

grid-template: repeat(2, 50px) / repeat(3, 1fr);

grid-template est la verion agrégé de grid-template-rows et grid-template-columns.

1
2
3
4
5
6

Maintenant vous savez mettre en place un grille et la manipuler. Voyons en détails comment créer un template responsive en utilisant ce que nous avons vu.

Gestion des sections

Nous allons maintenant changer de modéles HMTL, pour travailler sur une maquette de site standard avec CSS grid.

<div class="container">
   <div class="header">En-tête</div>
   <div class="menu">Menu</div>
   <div class="content">Contenu</div>
   <div class="footer">Pied-de-page</div>
</div>
En-tête
Contenu

Dans l’exercice nous allons mettre en place une section par ligne sauf pour menu est content qui serons sur la même ligne.

.container {
    display: grid;//rien de nouveaux ici
    grid-gap: 3px;
    grid-template-columns: repeat(2, 1fr);//on défini 2 colonnes
    grid-template-rows: 40px 200px 40px;// et 3 lignes
}

En l’état ce n’est pas ce que nous souhaitons.

En-tête
Contenu

Nous avons nos 3 lignes mais la dernière et pour le moment vide. Nous allons a présent modifier uniquement la classe HEADER pour lui faire prendre l’intégralité de sa ligne.

.header {
    grid-column-start: 1;
    grid-column-end: 3;
}
En-tête
Contenu

Et là vous devez vous demander pourquoi la valeur de grid-column-end est 3. C’est tout simplement parce-que la valeur la valeur de la propriété représente la ligne latérale d’une colonne.

1 colonne possède 2 lignes latérale, 2 colonnes en compte 3.

Dans notre exemple grid-column-end : 3, correspond à la troisième tranche de la paire de colonne.

Simplifions avec la syntaxe abrégé :

.header {
    grid-column: 1 / 3;
}
.footer {
    grid-column: 1 / -1;//encore mieux. -1 signifie toutes les fractions
}

Grid-column attend deux variables, la première correspond à la ligne latérale (tranche gauche de la cellule) ou va débuter la cellule. la seconde est la tranche ou va s’arrêter la cellules.

1/3 signifie donc à partir de la première tranche verticale de la colonne, jusqu’à la troisième tranche verticale.

Le -1 utilisé pour le footer, correspond à ‘auto’ dans le sens ou cela défini la largeur maximum disponible. Dans l’exemple cela reviens au même, mais il est toujours utile d’utiliser des valeurs relatives plutôt qu’absolu, si votre projet évolue vous n’aurez pas modifier ces valeurs.

En-tête
Contenu

Ajuster rapidement la disposition des blocs.

La notion la plus importante pour le moment c’est de bien comprendre le fonctionnement des propriétés grid-row et des valeurs qui la paramètre.

.header {
    grid-column: 2 / -1;
}

.menu {
    grid-row: 1 / 3;
}

Pour bien comprendre le comptage des lignes l’exemple ci-contre , utilise grid-colomn : 2 ce qui décale le positionnement du header d’une fraction.

A lire  CSS critique et WordPress

Grid-row : 1/3 demande que le bloc occupe l’espace  de la première ligne à la troisième.

En-tête
Contenu

Template-area

Surement la fonctionnalité la plus cool (oui vraiment ^^). Nous allons utiliser des représentations visuelle en css.

.container {
    height: 100%;
    display: grid;
    grid-gap: 3px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 40px auto 40px;
    grid-template-areas: 
        "h h h h h h h h h h h h"
        "m c c c c c c c c c c c"
        "f f f f f f f f f f f f";
}

grid-template-areas est le plan, la matrice qui sera utilisé par la suite pour positionner les blocs. pour le moment ce code n’est pas fonctionnel il faut avant désigner les zones.

.header {
    grid-area: h;
}
.menu {
    grid-area: m;
}
.content {
    grid-area: c;
}
.footer {
    grid-area: f;
}

Et voilà cela devient un jeux d’enfant de tester différentes dispositions.

En-tête
Contenu

Il suffit de modifier la lettre dans la matrice pour déplacer les blocs. Vous pouvez aussi utiliser des ‘.’ pour laisser de espace vide.

grid-template-areas: 
        ". h h h h h h h h h h ."
        "m c c c c c c c c c c c"
        ". f f f f f f f f f f .";
En-tête
Contenu

Encore plus responsive

Maintenant voyons comment rendre notre disposition encore plus adaptable en CSS grid.

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

La propriété grid template columns nous est familiére, ce qui n’est pas le cas des paramètres auto-fit et minmax.

  • auto-fit placera les blocs si l’espace est suffisant pour l’accueillir.
  • minmax défini la dimension minium et maximum d’un élément.

Ainsi si l’élément fait 300px il y aura 3 colonnes sur la ligne. Jusqu’à une dimension de 399px l’espace sera réparti entre les 3 colonnes. A 400px une quatrième colonnes sera affiché.

1
2
3
4
5
6
7
8
9
10
11
12

Auparavant nous avons défini des valeurs explicite (ou absolu) pour la hauteur des lignes.

grid-template-rows: 100px 100px;

Mais avec un design responsive il est plus pratique d’utiliser

grid-auto-rows: 100px;

Qui détermine la hauteur des lignes à 100px, et non plus seulement les deux premières.

Maintenant la galerie CSS grid

Nous sommes enfin prêt pour la création de notre galerie responsive. Nous allons créer une grille d’image avec des formats différents qui s’adapteront au format de l’écran. Et cela sans JavaScript.

<div class="galerie">
<div><img src="img/normal1.jpg"/></div>
<div class="vertical"><img src="img/vertical1.jpg"/></div>
<div class="horizontal"><img src="img/horizontal1.jpg"/></div>
<div><img src="img/normal2.jpg"/></div>
<div><img src="img/normal3.jpg"/></div>
<div class="big"><img src="img/big1.jpg"/></div>
<div><img src="img/normal4.jpg"/></div>
<div class="vertical"><img src="img/vertical2.jpg"/></div>
<div><img src="img/normal5.jpg"/></div>
<div class="horizontal"><img src="img/horizontal2.jpg"/></div>
<div><img src="img/normal6.jpg"/></div>
<div class="big"><img src="img/big2.jpg"/></div>
<div><img src="img/normal7.jpg"/></div>
<div class="horizontal"><img src="img/horizontal3.jpg"/></div>
<div><img src="img/normal8.jpg"/></div>
<div class="big"><img src="img/big3.jpg"/></div>
<div><img src="img/normal9.jpg"/></div>
<div class="vertical"><img src="img/vertical3.jpg"/></div>
</div>

Utilisons ce plan pour la suite de l’exercice.

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-auto-rows: 75px;
}

.horizontal {}

.vertical {}

.big {}

A présent nous allons modifier l’affichage pour la classe ‘.horizontal’ afin de lui faire occupé 2 fractions soit 3 tranches verticale.

.horizontal {
    grid-column: auto / span 2;
}

On continu avec les deux formats d’image qu’il reste à configurer vertical et big.

.vertical {
    grid-row: span 2;
}

.big {
    grid-column: span 2;
    grid-row: span 2;
}

Mais maintenant nous avons des espaces vide dans notre galerie.

Pour ajuster et pour finir nous utilisons maintenant ‘grid-auto-flow’:

.container {
grid-auto-flow: dense;
}

Et voilà une galerie d’image responsive et élégante quelque soit l’écran de vos visiteurs.

A lire  Effet SCSS

Cette façon de travailler avec le CSS grid est exactement ce que l’on attend. Le HTML fourni la structure et l’affichage est gérer par le CSS comme il se doit.

L’utilisation des grids est une excellente alternative aux medias queries, plus simple et plus facile à manipuler c’est la méthode idéale pour mettre en place une solution responsive efficace et inter-compatible.

Ré-cap des propriétés important

//met en place l'affichage en grille indispensable !
   display: grid;
   
   //détermine le nombres et les dimensions des colonnes
   grid-template-columns: 40px auto 40px;
   
   //détermine le nombres et les dimensions des lignes
   grid-template-rows: 40px auto 40px;
   
   //défini la hauteur des lignes sans définir le nombres de lignes
   grid-auto-rows: 40px;
   
   //espace entre les cellules
   grid-gap: 3px;
   
   //synthétise grid-template-rows et grid-template-columns
   //dans cet ordre.
   grid-template: repeat(2, 50px) / repeat(3, 1fr);
   
   //défini la tranche initiale dans la grille
   grid-column-start: 1;
   
   //tranche de fin. Attention ! deux cellules possédent 3 tranches !
   grid-column-end: 3;
   
   //version simplifier des deux propriété précédentes
   grid-column: 1 / -1;
   
   //Permet de créer une matrice pour la disposition des éléments
   grid-template-areas: 
        "h h h h h h h h h h h h"
        "m c c c c c c c c c c c"
        "f f f f f f f f f f f f";
   //permet d'attribuer un identifiant à rappeler dans la matrice.
   grid-area: h;
   
   //défini une largeur minimal et rempli autant que possible l'espace.
   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

Tuto vidéo par Harald Borgen

Si vous souhaitez allez plus loin avec le CSS-Grid je réitère mon invitation à lire le tutoriel en anglais qui propose quatre autres vidéo sur l’utilisation du CSS.

 

© 2018 Occitaweb formation WordPress et média sociaux