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 class="overlay">Masque</div>
</div>

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

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

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

.sidebar {
  grid-area: sd;
  text-align: center;
  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";
}

.wrapper > div.overlay {
  z-index: 10;
  grid-column: main-start / main-end;
  grid-row: hd-start / ft-end;
  border: 4px solid darkblue;
  background-color: rgba(0, 148, 255, .4);
  color: rgb(0, 148, 255);
  font-size: 150%;
}