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
<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;
}
S’abonner
Notification pour
guest

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.

0 Commentaires
Le plus ancien
Le plus récent Le plus populaire
Commentaires en ligne
Afficher tous les commentaires