Grid en css
Résolu/Fermé
JC_8280
Messages postés
78
Date d'inscription
jeudi 19 mars 2020
Statut
Membre
Dernière intervention
7 février 2021
-
26 janv. 2021 à 00:45
JC_8280 Messages postés 78 Date d'inscription jeudi 19 mars 2020 Statut Membre Dernière intervention 7 février 2021 - 4 févr. 2021 à 14:22
JC_8280 Messages postés 78 Date d'inscription jeudi 19 mars 2020 Statut Membre Dernière intervention 7 février 2021 - 4 févr. 2021 à 14:22
A voir également:
- Grid en css
- Enlever couleur lien css ✓ - Forum CSS
- Css premier plan ✓ - Forum CSS
- Alignement grid - Forum Windows 7
- Css exposant ✓ - Forum CSS
- Css download - Télécharger - HTML
1 réponse
JC_8280
Messages postés
78
Date d'inscription
jeudi 19 mars 2020
Statut
Membre
Dernière intervention
7 février 2021
4 févr. 2021 à 14:22
4 févr. 2021 à 14:22
Voici ma réponse trouvée à ma question, au cas où ça interesse quelqu'un:
<!DOCTYPE html> <html> <head> <style> .item1 { grid-area: A; } .item2 { grid-area: B; } .item3 { grid-area: C; } .item4 { grid-area: D; } .item5 { grid-area: E; } .item6 { grid-area: F; } .item7 { grid-area: G; } .item8 { grid-area: H; } .grid-container { display: grid; grid-template-areas: 'A B D F G' 'A C E F G' 'H H H H H'; grid-gap: 10px; background-color: #2111F3; padding: 10px; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 30px; } </style> </head> <body> <h1>Grid Layout</h1> <p>This grid layout contains six columns and three rows:</p> <div class="grid-container"> <div class="item1">1=A</div> <div class="item2">2=B</div> <div class="item3">3=C</div> <div class="item4">4=D</div> <div class="item5">5=E</div> <div class="item6">6=F</div> <div class="item7">7=G</div> <div class="item8">8=H</div> </div> </body> </html>