Portfolio : CSS grid (démarrage)

23/11/2020 ☼ grid ☼ grille ☼ portfolio

Niveau : ★★★☆☆

Cours Projet Web 2020-21. Voici l’exemple à étudier et modifier. Les commentaires dans le code permettent de suivre les différentes étapes.

⟶ Le projet sur Glitch (pour remixer le projet)

1 - Le résultat dans la page

See the Pen Portfolio : css grid by Nicolas Tilly (@nicolastilly) on CodePen.

L’exercice consiste à jouer à partir de cette grille de 6 blocs en les plaçant différemment…

2 - Intégrer le contenu html

<div class="container">
    <div class="align bloc1">😀</div>
    <div class="align bloc2">😆</div>
    <div class="align bloc3">🤣</div>
    <div class="align bloc4">🤨</div>
    <div class="align bloc5">😮</div>
    <div class="align bloc6">🤔</div>
</div>

3 - La grille en CSS

.container {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    }

4 - Aller plus loin (avec grid-template-areas)

Le template permet un contrôle précis sur la mise en page des 6 blocs (ordre des blocs).

.container {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;

    grid-template-areas:
    "bloc1 bloc2 bloc3"
    "bloc1 bloc5 bloc6"
    "bloc4 bloc4 bloc4"
    ;
}

Aperçu de la grille de la page dans Firefox.

5 - Le code css et html complet

Les explications sont dans les commentaires dans le code ci-dessous.

See the Pen Portfolio : css grid by Nicolas Tilly (@nicolastilly) on CodePen.