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.

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
Aperçu de l'exemple d'interface 1
<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
Aperçu de l'exemple d'interface 2
<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
Aperçu de l'exemple d'interface 4
<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
Aperçu de l'exemple d'interface 3
<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
Exemple 29
<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
Exemple 30
<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
Exemple 31
<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
Exemple 32
<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
Exemple 33
<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

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.

S’abonner
Notification pour
guest

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

0 Commentaires
Commentaires en ligne
Afficher tous les commentaires