CSS · Leçon 5

CSS Grid

Flexbox gère une dimension (ligne ou colonne). Grid gère les deux à la fois : parfait pour les galeries et la mise en page globale.

Définir des colonnes

L'unité fr (fraction) partage l'espace restant. 1fr 2fr = la 2e colonne est deux fois plus large.

Raccourci repeat(4, 1fr) = 1fr 1fr 1fr 1fr. Et la formule magique pour une grille qui s'adapte seule à la largeur : repeat(auto-fill, minmax(150px, 1fr)).

Le terrain de jeu

1
2
3
4
5
6
7

      

    

  


  

    
Placer un élément sur plusieurs cases


.grand   { grid-column: span 2; }   /* occupe 2 colonnes */
.haut    { grid-row: span 2; }      /* occupe 2 lignes */
.banniere { grid-column: 1 / -1; }  /* de la 1re à la dernière ligne de grille : toute la largeur */

    



    

  


  

    
Dessiner sa mise en page : grid-template-areas

    
On nomme des zones, puis on « dessine » la grille avec du texte. Essaie de déplacer aside à droite !

    



    

    

      
Pour aligner un logo et un menu sur une seule ligne, tu utilises plutôt…

      
    
        
  1. Flexbox
    2. 
        
  2. Grid
    3. 
      

      
Une seule dimension → Flexbox. Des lignes et des colonnes (galerie, squelette de page) → Grid. Les deux se combinent très bien.

    

  


  

    
À toi de jouer

    

      
La galerie photo

      
    
        
  • .galerie : une grille de 3 colonnes égales, espacées de 10px.
    • 
        
  • La photo .vedette occupe 2 colonnes.
    • 
      

      



      

      
Indice.galerie passe en display: grid, puis ses colonnes se définissent avec grid-template-columns.

      
Indice3 colonnes égales : repeat(3, 1fr). Écart entre les cases : gap: 10px.

      
IndicePour la photo vedette : .vedette { grid-column: span 2; }


    


    

      
Le squelette de page

      
Avec grid-template-areas : en-tête en haut sur toute la largeur, menu latéral de 200px à gauche, contenu à droite, pied de page en bas sur toute la largeur.

      



      

      
Indice.site en grille avec 2 colonnes : grid-template-columns: 200px 1fr.

      
IndiceDonne un nom à chaque zone avec grid-area, par exemple header { grid-area: header; }, puis dessine la grille avec grid-template-areas.

      
IndiceLe « dessin » de la grille :
grid-template-areas:
  "header header"
  "nav    main"
  "footer footer";


    

  


  

    
À retenir