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)
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…
<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>
.container {
height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
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.
Les explications sont dans les commentaires dans le code ci-dessous.
See the Pen Portfolio : css grid by Nicolas Tilly (@nicolastilly) on CodePen.