Aide Calculette 1

La calculette
permet d'appréhender
de nombreux aspects
de la technologie
CSS-grid.
 Aide Calculette 2

Mais oublions la calculette un instant.

Que remarquez-vous sur ce plan ?

Avez-vous identifié des zones ?

 Aide Calculette 3

Analyse ⌛⌛⌛=80%

Une zone permet de regrouper des objets par affinité.

Nous remarquons simplement que

🥑🍕🍓🍐🍌🍋 = fruits

= transports

Nous pouvons synthétiser notre analyse à l'aide d'un dessin.

Grille principale

Grille secondaire Grille secondaire

 Aide Calculette 4

Plus précisément, il y a une grille principale constituée de deux

grilles secondaires.

Grille principale / définie par Zone

 Aide Calculette 5

Chaque sous grille est également une grille. Voici le cas de la

grille fruits.

Grille fruits / définie par quadrillage

 Aide Calculette 6

Bilan
 Aide Calculette 7

Réalisation ⌛= 20%
La réalisation est la traduction (ou implémentation) du projet en
HTML/CSS. Voici les fiches résumés.

Grille Principale

.grid-main {
<div class="grid-main">
display: grid;
<div class="grid-fruits"></div>

<div class="grid-transports"></div> grid-template-areas:

"fruits transports";
</div>

grid-template-columns: 300px 100px;

grid-template-rows: 400px;
gap: 5px;
}
 Aide Calculette 8

Grille fruits

// On affecte la grille à la zone de la

<div class="grid-fruits">
grille principale
<div>🍒</div> .grid-fruits {
grid-area: fruits;
<div>🥝</div>
}
<div>🥥</div>

<div>🍇</div>
// On définit le quadrillage
<div>🍈</div>
.grid-fruits {
<div>🍉</div>
display: grid;
<div>🍊</div> grid-template-columns: repeat(3,
100px);
<div>🍋</div> }
<div>🍌</div>

<div>🍐</div>

<div>🍓</div>

<div>🥑</div>

</div>
 Aide Calculette 9

En action
https://github.com/dupontdenis/Grid-Grid.git

Déploiement

https://dupontdenis.github.io/Grid-Grid/grid.html

Il resterait à titre de recherche à trouver une grille permettant la

prise en charge d'un HTML ou les types sont mélangés.

<div class="grid-main">

<div data-type="vehicule">🛵</div>

<div data-type="fruit">🍒</div>

<div data-type="fruit">🥝</div>

<div data-type="fruit">🥥</div>

<div data-type="vehicule"></div>

<div data-type="animal">🐂</div>

<div data-type="fruit">🍊</div>

<div data-type="vehicule">🚲</div>

<div data-type="fruit">🍈</div>

<div data-type="animal">🐶</div>

<div data-type="vehicule">🚡</div>

</div>

🧮 Retour sur notre projet.

Commençons par imaginer un problème plus simple.
 Aide Calculette 10

Pouvez vous définir des zones ?

 Aide Calculette 11

Complétez les zones pour définir la grille principale de notre

projet.

Annexes

Centrer les objets

Pour centrer les objets deux options sont possibles.

1. Ajoutez le code CSS suivant aux <div>

.grid-main div {

display: grid;

place-items: center;

width: 100%;

height: 100%;

}
 Aide Calculette 12

2. Changer le code HTML des <div> en <button>

HOWTO : Mettez vous sur un <div> et utilisez "ctrl D" pour

sélectionner un ensemble de <div>. Vous aurez ainsi un multi-
curseur.