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