Voici quelques exemples d’interfaces web construites avec une grille CSS (grid layout) et des zones d’affichages nommées. Il s’agit uniquement du positionnement des différents éléments de contenu, ces interfaces doivent être terminées.
Informations sur les interfaces :
- Les éléments de grilles utilisés pour ces exemples ne sont pas de simples
<div>
mais des balises sémantiques. - Les dimensions sont évidemment ajustables à vos besoins.
- Les différents éléments sont colorés pour permettre de les distinguer facilement.
- Vous pouvez tester chacune des interfaces en cliquant sur le lien correspondant.
Interfaces basiques quatre zones
Exemple

<section class="page"> <header>En-tête</header> <nav>Menu</nav> <main>Contenu de la page</main> <footer>Pied de page</footer> </section>
body { margin: 0; } .page { min-height: 100vh; display: grid; grid-template-columns: 160px auto; grid-template-rows: 80px auto 50px; grid-template-areas: "entete entete" "menu contenu" "pied pied"; } .page header { background-color: #fffb82; grid-area: entete; } .page nav { background-color: #c7ffd2; grid-area: menu; } .page main { background-color: #cce9ff; grid-area: contenu; } .page footer { background-color: #ffccee; grid-area: pied; }
Exemple

<section class="page"> <header>En-tête</header> <nav>Menu</nav> <main>Contenu de la page</main> <footer>Pied de page</footer> </section>
body { margin: 0; } .page { min-height: 100vh; display: grid; grid-template-columns: 140px auto; grid-template-rows: 80px auto 50px; grid-template-areas: "entete entete" "menu contenu" "menu pied"; } .page header { background-color: #fffb82; grid-area: entete; } .page nav { background-color: #c7ffd2; grid-area: menu; } .page main { background-color: #cce9ff; grid-area: contenu; } .page footer { background-color: #ffccee; grid-area: pied; }
Exemple

<section class="page"> <header>En-tête</header> <nav>Menu</nav> <main>Contenu de la page</main> <footer>Pied de page</footer> </section>
body { margin: 0; } .page { min-height: 100vh; display: grid; grid-template-columns: 160px auto; grid-template-rows: 80px 1fr 50px; grid-template-areas: "menu entete" "menu contenu" "menu pied"; } .page header { background-color: #fffb82; grid-area: entete; } .page nav { background-color: #c7ffd2; grid-area: menu; } .page main { background-color: #cce9ff; grid-area: contenu; } .page footer { background-color: #ffccee; grid-area: pied; }
Exemple

<section class="page"> <header>En-tête</header> <nav>Menu</nav> <main>Contenu de la page</main> <footer>Pied de page</footer> </section>
body { margin: 0; } .page { min-height: 100vh; display: grid; grid-template-columns: 1fr; grid-template-rows: 80px 50px auto 50px; grid-template-areas: "entete" "menu" "contenu" "pied"; } .page header { background-color: #fffb82; grid-area: entete; } .page nav { background-color: #c7ffd2; grid-area: menu; } .page main { background-color: #cce9ff; grid-area: contenu; } .page footer { background-color: #ffccee; grid-area: pied; }
Interfaces basiques avec barres latérales
Exemple

<section class="page"> <header>En-tête</header> <nav>Menu</nav> <main>Contenu principal</main> <aside>Contenu secondaire</aside> <footer>Pied de page</footer> </section>
body { margin: 0; } .page { min-height: 100vh; display: grid; grid-template-columns: 160px auto 160px; grid-template-rows: 80px 50px 1fr 50px; grid-template-areas: "entete entete entete" "menu menu menu" "contenu contenu contenu-2" "pied pied pied"; } .page header { background-color: #fffb82; grid-area: entete; } .page nav { background-color: #c7ffd2; grid-area: menu; } .page main { background-color: #cce9ff; grid-area: contenu; } .page aside { background-color: #b8a5da; grid-area: contenu-2; } .page footer { background-color: #ffccee; grid-area: pied; }
Exemple

<section class="page"> <header>En-tête</header> <nav>Menu</nav> <main>Contenu principal</main> <aside>Contenu secondaire</aside> <aside>Contenu secondaire 2</aside> <footer>Pied de page</footer> </section>
body { margin: 0; } .page { min-height: 100vh; display: grid; grid-template-columns: 160px auto 160px; grid-template-rows: 80px 50px 1fr 50px; grid-template-areas: "entete entete entete" "menu menu menu" "contenu-2 contenu contenu-3" "pied pied pied"; } .page header { background-color: #fffb82; grid-area: entete; } .page nav { background-color: #c7ffd2; grid-area: menu; } .page main { background-color: #cce9ff; grid-area: contenu; } .page aside:first-of-type { background-color: #b8a5da; grid-area: contenu-2; } .page aside:last-of-type { background-color: #b8a5da; grid-area: contenu-3; } .page footer { background-color: #ffccee; grid-area: pied; }
Interface plusieurs footers (grilles imbriquées)
Exemple

<section class="page"> <header>En-tête</header> <nav>Menu</nav> <main>Contenu principal</main> <footer> <div>Pied de page 1</div> <div>Pied de page 2</div> <div>Pied de page 3</div> </footer> </section>
body { margin: 0; } .page { min-height: 100vh; display: grid; grid-template-rows: 80px 50px 1fr 150px; grid-template-areas: "entete " "menu " "contenu" "pied"; } .page header { background-color: #fffb82; grid-area: entete; } .page nav { background-color: #c7ffd2; grid-area: menu; } .page main { background-color: #cce9ff; grid-area: contenu; } .page footer { background-color: #ffccee; grid-area: pied; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .page footer > div { background-color: #ccc; }
Interface avec contenu principal fluide
Exemple

<section class="page"> <header>En-tête</header> <nav>Menu</nav> <main>Contenu principal</main> <footer>Pied de page</footer> </section>
body { margin: 0; } .page { min-height: 100vh; display: grid; grid-template-rows: 80px 50px 1fr auto; grid-template-areas: "entete " "menu " "contenu" "pied"; } .page header { background-color: #fffb82; grid-area: entete; } .page nav { background-color: #c7ffd2; grid-area: menu; } .page main { background-color: #cce9ff; grid-area: contenu; width: 100%; max-width: 1050px; min-width: 450px; justify-self: center; } .page footer { background-color: #ffccee; grid-area: pied; }
Exemple

<section class="page"> <header>En-tête</header> <nav>Menu</nav> <main>Contenu principal</main> <footer>Pied de page</footer> </section>
body { margin: 0; } .page { min-height: 100vh; display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 80px 1fr auto; grid-template-areas: "entete entete" "menu contenu" "pied pied"; } .page header { background-color: #fffb82; grid-area: entete; } .page nav { background-color: #c7ffd2; grid-area: menu; } .page main { background-color: #cce9ff; grid-area: contenu; width: 100%; max-width: 1050px; min-width: 450px; justify-self: center; } .page footer { background-color: #ffccee; grid-area: pied; }