Grid en action

Création de grille

Nous allons construire un page avec la dernière des technologies de placement : grid.

Fichier source

Télécharger dans le dossier de votre choix (ici le bureau) le Fichier à Compléter pour obtenir la grille suivante ➤

Espace de travail

Utiliser l'éditeur Visual studio pour ouvrir le fichier ou ouvrir le fichier html avec Chrome, on prendra soit d'ajouter le dossier de téléchargement (bureau) dans votre espace de travail ( aide ).

Modification dans chrome
F12->Source->Filesystem

Mise en place de la grille

Voici la grille à réaliser ( figure obtenue avec l'outil Mozilla(dernière version) ).

La grille comporte 5 colonnes espacées de 1fr.
L'espace entre les colonnes est simulé par l'ajout de colonnes de petite taille.

Code CSS

On ne se préoccupe pas des lignes : grid-template-rows: auto;

Dans le code source, modifier le CSS pour installer une grille de 9 colonnes.

Il faudra ajouter les attributs à display et grid-template-columns

On utilisera le motif repeat pour faciliter la répétition du motif  1fr 12%.

Placements des blocs

Modifier le CSS de chaque item pour obtenir le placement de la figure suivante.

La figure donne pour les blocs numérotés leurs positions.

Il faut dans le fichier source compléter le code CSS pour obtenir ces placements.

Exemple

Pour le bloc de classe griditem1, le placement doit /* faire commencer à la colonne 3->7 */
ainsi, on ajoutera les propriétés grid-column-start et grid-column-end avec les valeurs 3 et 7 dans la définition de la classe

.griditem1 { /* faire commencer à la colonne 3->7 */ grid-column-start : 3; grid-column-end : 7; margin: 0 auto; padding: 0; width: 100%; text-align: right; }

Gap

Nous avons simulé un espacement entre les colonne 1,3,5,7,9 en ajoutant de petites colonnes de taille 1fr en position 2,4,6,8.

Est il possible de simplifier la définition de la grille avec l'ajout de gap ?

Code

voir fichier