Création de grille
Fichier source
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) ).
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 ?