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.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> </body> </html>
Dans votre dossier racine, créez un nouveau fichier CSS sous le nom grid-css28.css. Si vous connaissez le langage SCSS, utilisez-le.
Associez le fichier grid-css28.css à la page HTML.
Code à placer dans l’en-tête de la page HTML en personnalisant la valeur de l’attribut href
si nécessaire afin qu’elle corresponde à l’emplacement et au nom du fichier CSS.
<link rel="stylesheet" type="text/css" href="style.css">
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.
<div> <div>Élément 1</div> <div>Élément 2</div> <div>Élément 3</div> <div>Élément 4</div> <div>Élément 5</div> </div>
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.
<div class="container"> <div class="item item1">Élément 1</div> <div class="item item2">Élément 2</div> <div class="item item3">Élément 3</div> <div class="item item4">Élément 4</div> <div class="item item5">Élément 5</div> </div>
En CSS, appliquez une couleur d’arrière-plan différente pour chacun des éléments enfants.
.item1 { background-color: #30b16d; } .item2 { background-color: #2a9d60; } .item3 { background-color: #258954; } .item4 { background-color: #1f7548; } .item5 { background-color: #1a613b; }
$color: #35c579; @for $i from 1 through 5 { .item#{$i} { background-color: darken($color, $i * 5%); } }
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 :
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto); } .item2 { grid-column-start: 3; } .item3 { grid-row-start: 2; grid-column-start: 2; } .item4 { grid-row-start: 3; grid-column-start: 1; } .item5 { grid-row-start: 3; grid-column-start: 3; }
Ajoutez des gouttières à la grille.
gap
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3,auto); gap: 1rem 1rem; }
Ajustez le réglage des alignements horizontaux des éléments pour obtenir le résultat suivant :
justify-items
justify-self
.container { display: grid ; grid-template-columns: repeat(3, 1fr) ; grid-template-rows: repeat(3,auto); gap: 1rem 1rem; justify-items: left; } .item2 { grid-column-start: 3; justify-self: right; } .item3 { grid-row-start: 2; grid-column-start: 2; justify-self: center; } .item4 { grid-row-start: 3; grid-column-start: 1; } .item5 { grid-row-start: 3; grid-column-start: 3; justify-self: right; }
Ajoutez du contenu dans l’élément 5 afin qu’il s’affiche sur plusieurs lignes.
Ajustez le réglage de la grille pour obtenir le résultat suivant :
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 1rem 1rem; justify-items: left; }
Ajustez les réglages de la grille pour utiliser des rangées implicites.
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 1rem 1rem; justify-items: left; }
Modifiez la grille pour lui ajouter des zones nommées et utilisez-les pour obtenir la mise en forme suivante :
.container { display: grid; grid-template-areas: "zone1 zone1 zone2" "zone3 zone3 zone3" "zone4 zone5 zone5"; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 1rem 1rem; } .item1 { grid-area: zone1 ; } .item2 { grid-area: zone2 ; } .item3 { grid-area: zone4 ; } .item4 { grid-area: zone5 ; } .item5 { grid-area: zone3 ; }
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.
.container { display: grid; grid-template-areas: "zone1 zone1 zone2" "zone3 zone3 zone3" "zone4 zone5 zone5"; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(50px, auto); gap: 1rem 1rem; }