Grid Layout > Structure en pratique
La syntaxe raccourcie : grid-template
- Un. Maecenas faucibus mollis interdum...
- Deux. Fusce dapibus, tellus ac cursus commodo...
- Trois. Duis mollis, est non commodo luctus...
- Quatre. Nulla vitae elit libero, a pharetra augue...
- Cinq. Cras Parturient Dolor Magna. Vestibulum id
ligula...
- Six. Vestibulum id ligula porta felis euismod semper...
- [containeur] display: grid au containeur
- = contexte de grille de mise en page
- [containeur] grid-template
- Plutôt que d’utiliser les deux propriétés grid-template-columns et grid-template-rows, nous pouvons utiliser la propriété raccourcie : grid-template.
Attention, il convient de bien noter l’ordre de déclaration des deux propriétés. Nous devons déclarer les valeurs de la propriété grid-template-rows en premier et ensuite celles de la propriété grid-template-columns. Les séries de valeurs sont séparées par le caractère "/"
Ex : grid-template: 100px 100px 200px / 50% 50%;