Grid
Construire la mise en page de ta cité en 2D.
6.1 Le plan d'urbanisme : grid-template-columns
C'est la commande qui définit la structure de tes colonnes. Tu peux choisir des tailles fixes (px), flexibles (fr), ou automatiques.
grid-template-columns : 1fr 1fr 1fr
Mairie
Maison
Boutique
Parc
Caserne
Exemple : grid-template-rows: auto 200px
Bannière
Menu
Zone principale (200px)
Barre latérale (200px)
Exemple : Étendre un élément avec grid-column: 1 / 3
🏢 Gratte-ciel
Petite maison
Parc
Boutique
6.2 Construire un gratte-ciel : Étendre les bâtiments
Le vrai pouvoir de Grid est de pouvoir dire à un bâtiment de s'étendre sur plusieurs parcelles avec grid-column et grid-row.
CSScss
.gratte-ciel {
/* Ce bâtiment s'étendra de la ligne de colonne 1 à la 3 */
grid-column: 1 / 3;
/* Et de la ligne de rangée 1 à la 3 */
grid-row: 1 / 3;
}Gratte-ciel
Petite maison
Parc