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.

Solution HTML :
<!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 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.

Solution 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.

Solution HTML :
<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.

Solution HTML :
<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.

Solution CSS :
.item1 {
    background-color: #30b16d;
}
.item2 {
    background-color: #2a9d60;
}
.item3 {
    background-color: #258954;
}
.item4 {
    background-color: #1f7548;
}
.item5 {
    background-color: #1a613b;
}
Solution SCSS :
$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 :

Aperçu de la disposition
Solution CSS :
.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.

Aperçu avec des gouttières
Solution CSS :
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3,auto);
    grid-gap: 1rem 1rem;
}

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

Aperçu du réglage des alignements
Solution CSS :
.container {
    display: grid ;
    grid-template-columns: repeat(3, 1fr) ;
    grid-template-rows: repeat(3,auto);
    grid-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.

Aperçu sur plusieurs lignes

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

Aperçu des hauteurs uniformes
Solution CSS :
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 1rem 1rem;
    justify-items: left;
}

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

Aperçu des hauteurs uniformes
Solution CSS :
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    grid-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 :

Aperçu avec des zones nommées
Solution CSS :
.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;
    grid-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.

Aperçu des lignes dimensionnées
Solution CSS :
.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);
    grid-gap: 1rem 1rem;
}

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.

S’abonner
Notification pour
guest

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

0 Commentaires
Commentaires en ligne
Afficher tous les commentaires