[Résolu] Grid-template-areas

Bonjour,

avec grid-template-areas, il est possible de laisser une "cellule" grid vide, comme ci-dessous :

.wrapper {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas: 
      "hd hd hd hd   hd   hd   hd   hd   hd"
      "sd sd sd main main main main main main"
      ".  ft  ft  ft   ft   ft   ft   ft   ft";
}

Ce sont les "." qui le permettent. Comment fait-on ça sans grid-template-areas ? Avec /span ? Ou d'une autre façon ? L'avantage de grid-template-areas, c'est qu'il donne une représentation non abstraite du résultat. On voit directement en lisant le code ci-dessus que le point va laisser une cellule vide de la dimension du sidebar, et que le footer sera sous le content.

Source :
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas

Merci pour vos réponses.
Modifié par Bongota (10 Nov 2018 - 20:15)

.wrapper {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: minmax(100px, auto);
}

1° méthode : placement automatique avec la largeur des blocs

.header { grid-column: span 9; }
.sidebar { grid-column: span 3; }
.main { grid-column: span 6; }
.footer{ grid-column: 2 /span 8; }

2° méthode en utilisant le numéro des colonnes:
-1 c'est le numéro de la dernière colonne ' la première en partant de la droite), mais on aurait très bien pu mettre 10 ( la 10° en partant de la gauche)

.header { grid-column: 1 / -1; }
.sidebar { grid-column: 1 / 4; }
.main { grid-column: 4 / -1; }
.footer{ grid-column: 2 / -1; }

une 3° méthode est possible en nommant les colonnes ( c'est celle que je préferre même si au départ elle est un peu plus contraignante)
Modifié par cpalo (13 Nov 2018 - 19:09)