Edit in JSFiddle

<div class="wrapper">
  <div class="header">En-tête</div>
  <div class="sidebar">Barre latérale</div>
  <div class="content">Contenu</div>
  <div class="footer">Pied de page</div>
</div>

.header {
  grid-area: hd;
  background-color: lightcoral;
}

.footer {
  grid-area: ft;
  background-color: lightblue;
}

.content {
  grid-area: main;
  background-color: lightyellow;
}

.sidebar {
  grid-area: sd;
  background-color: lightgreen;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(80px, auto);
  grid-template-areas: 
    "hd hd hd   hd   hd   hd   hd   hd" 
    "sd sd main main main main main main" 
    ". .   ft   ft   ft   ft   ft   ft";
}