body {

background-color: cornsilk }


.container {  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  grid-template-rows: 0.5fr 0.2fr 2.4fr 0.2fr;
  gap: 1px 2px;
  grid-auto-flow: row dense;
}

.header img { grid-area: 1 / 1 / 2 / 2; }

.footer { grid-area: 4 / 1 / 5 / 3; }

.site directory { grid-area: 2 / 2 / 3 / 3; }

.decobox { grid-area: 2 / 1 / 3 / 2; }

.emptyspace { grid-area: 1 / 2 / 2 / 3; }

.toggle sidebar { grid-area: 3 / 1 / 4 / 2; }

.main content { grid-area: 3 / 2 / 4 / 3; }


html, body , .container {
  height: 100%;
  margin: 0;
}

/* For presentation only, no need to copy the code below */

.container * {
  border: 1px solid black;
  position: relative;
}

.container *:after {
  content:attr(class);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
}