Exemples d'interfaces web construites avec une grille CSS

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.

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

Tester l’interface

<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;
}

Tester l’interface

<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;
}

Tester l’interface

<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;
}

Tester l’interface

<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

Tester l’interface

<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;
}

Tester l’interface

<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)

Tester l’interface

<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

Tester l’interface

<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;
}

Tester l’interface

<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;
}

Sauf mention contraire*, l'article Exemples d’interfaces web construites avec une grille CSS et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.