Cet exercice consiste à créer des interfaces web variées en utilisant les possibilités offertes par le système de grille de CSS.
Consignes de l’exercice
Mise en place de l’exercice
Créez un dossier de travail (dossier racine) sous le nom exercice-css32.
Dans votre dossier racine, créez un nouveau fichier HTML sous le nom grid-css32.html contenant la structure de base d’une page web.
Afficher la solutionDans votre dossier racine, créez un nouveau fichier CSS sous le nom grid-css32.css. Si vous connaissez le langage SCSS, favorisez ce langage.
HTML : Associez le fichier grid-css32.css à la page HTML.
Afficher la solutionPremière interface
HTML : Dans la page HTML, ajoutez un élément <div></div>
(qui sera le conteneur principal) accompagné de 4 enfants de type <div></div>
. Les enfants contenant respectivement les textes “En-tête”, “Menu”, “Contenu” et “Pied de page”.
HTML : Ajoutez plusieurs paragraphes de texte à la place du texte “Contenu”. Vous pouvez, pour cela, utiliser du Lorem Ipsum.
Afficher la solution HTMLHTML : Ajoutez les classes CSS qui vous permettront par la suite de cibler chacun des 5 éléments <div></div>
créés à la question précédente.
CSS : Ajoutez des couleurs d’arrière-plan différentes pour les différents éléments afin de pouvoir les identifier visuellement.
Afficher la solution CSSCSS : Transformez le conteneur principal en élément de type grille
Afficher les propriétés CSSAfficher la solution CSSCSS : Réglez la grille pour obtenir un résultat sensiblement identique à l’illustration suivante :
Afficher les propriétés CSSAfficher la solution CSSCSS : Réglez la largeur du contenu principal afin d’éviter d’avoir des lignes trop larges ou au contraire trop étroites.
Afficher les propriétés CSSAfficher la solution CSSDeuxième interface
Dupliquez la page HTML et le fichier CSS, renommez les copies sous les noms grid-css32-2.html et grid-css32-2.css.
HTML : Dans la nouvelle page que vous venez de créer, pensez à modifiez le nom du fichier CSS.
Afficher la solution HTMLCSS : Transformez le conteneur principal en grille.
CSS : Dimensionnez les lignes et colonnes de la grille pour obtenir la grille suivante :
Vous devriez avoir à l’écran la disposition suivante :
Afficher les propriétés CSSAfficher la solution CSSCSS : Disposez les différents éléments dans la grille pour obtenir le résultat suivant :
Afficher les propriétés CSSAfficher la solution CSSTroisième interface
Dupliquez la page HTML et le fichier CSS, renommez-les copies sous les noms grid-css32-3.html et grid-css32-3.css.
HTML : Dans la nouvelle page web, en dessous de l’élément contenant le texte “Pied de page”, ajoutez deux nouveaux éléments <div></div>
contenant respectivement les textes “Colonne gauche ” et “Colonne droite” et ajoutez-leur des classes CSS.
CSS : Ajoutez une couleur d’arrière-plan aux deux nouveaux éléments que vous venez de créer.
CSS : Transformez le nouveau conteneur principal en grille.
CSS : Dimensionnez les lignes et colonnes de la grille pour obtenir la grille suivante :
Afficher la solution CSSCSS : Définissez des zones de grilles afin de correspondre au modèle ci-dessous :
Afficher les propriétés CSSAfficher la solution CSSCSS : Disposez les différents éléments dans la grille pour obtenir le résultat suivant :
Afficher les propriétés CSSAfficher la solution CSSQuatrième interface
Dupliquez la page HTML et le fichier CSS, renommez-les copies sous les noms grid-css32-4.html et grid-css32-4.css.
CSS : Appliquez les modifications nécessaires pour obtenir le résultat suivant :
Afficher la solution CSSSauf mention contraire*, l'article Grid Layout : interfaces web [CSS32] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.
Certainement l’exercice le plus difficile que j’ai rencontré depuis le début. Heureusement qu’il y a les corrections.