Grid
Construire la mise en page de ta cité en 2D.
Imagine : tu es le maire d'une ville dans un jeu de construction. Le HTML a livré les bâtiments : la mairie, les maisons, les magasins... Maintenant, c'est à toi de définir le plan d'urbanisme.
Grid, c'est ton outil d'architecte. Il te permet de dessiner une grille précise sur ton terrain, avec des parcelles de tailles différentes, pour ensuite placer chaque bâtiment exactement où tu le désires.
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
Exemple : grid-template-rows: auto 200px
Exemple : Étendre un élément avec grid-column: 1 / 3
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.
Astuce : Une grille de 3 colonnes a 4 lignes verticales. Pour qu'un élément s'étende sur les 3 colonnes, on lui dit de commencer à la ligne 1 et de finir à la ligne 4 (grid-column: 1 / 4;).
.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;
}