Grid Layout CSS28

Cet exercice consiste à explorer les possibilités offertes par le système de grille de CSS.

Consignes de l’exercice

Créez un dossier de travail (dossier racine) sous le nom exercice-css28.

Dans votre dossier racine, créez un nouveau fichier HTML sous le nom grid-css28.html contenant la structure de base d’une page web.

Dans votre dossier racine, créez un nouveau fichier CSS sous le nom grid-css28.css contenant la structure de base d’une page web. Si vous connaissez le SCSS, utilisez-le.

Associez le fichier grid-css28.css à la page HTML.

Dans la page HTML, ajoutez un élément <div></div> accompagné de 5 enfants de type <div></div> et contenant chacun le texte “Élément x” où x est le numéro de l’enfant.

Ajoutez toutes les classes nécessaires pour la manipulation des différents éléments HTML ajoutés à la question précédente. Vous devez pouvoir manipuler les enfants collectivement ou individuellement.

En CSS, appliquez une couleur d’arrière-plan différente pour chacun des éléments enfants.

En utilisant le système de grille de CSS, sans utiliser de pistes implicites et en réglant la hauteur des lignes sur auto, reproduisez la disposition suivante :

Aperçu de la disposition

Ajoutez des gouttières à la grille.

Aperçu avec des gouttières

Ajustez le réglage des alignements horizontaux des éléments pour obtenir le résultat suivant :

Aperçu du réglage des alignements

Ajoutez du contenu dans l’élément 5 afin qu’il s’affiche sur plusieurs lignes.

Aperçu sur plusieurs lignes

Ajustez le réglage de la grille pour obtenir le résultat suivant :

Aperçu des hauteurs uniformes

Ajustez les réglages de la grille pour utiliser des lignes implicites.

Aperçu des hauteurs uniformes

Modifiez la grille pour lui ajouter des zones nommées et utilisez-les pour obtenir la mise en forme suivante :

Aperçu avec des zones nommées

Modifiez le réglage des lignes implicites pour qu’elles aient une hauteur minimale de 50px, mais qu’elles puissent quand même s’agrandir si nécessaire.

Aperçu des lignes dimensionnées

Sauf mention contraire*, l'article Grid Layout [CSS28] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.