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 ou la grille) accompagné de quatre enfants de type <div></div>
(les enfants doivent être placés dans le conteneur principal). Les enfants doivent contenir 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 et créer des paragraphes <p></p>
.
HTML : Ajoutez les classes CSS qui vous permettront par la suite de cibler chacun des cinq é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. Pour tester, faites varier la largeur de la fenêtre de votre navigateur, sinon vous risquez de croire que cela ne fonctionne pas...
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 : Le conteneur principal est déjà une grille. Ajustez les réglages des 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 : Le conteneur principal est déjà une grille. Ajustez les réglages des 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.