index.css

.header {
  grid-area: header;
}

.menu {
  grid-area: menu;
}

.main {
  grid-area: main;
}

.right {
  grid-area: right;
}

.footer {
  grid-area: footer;
}

.grid-container {
  display: grid;
  /* grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer'; */

  grid-template-areas:
      'header header header header header header'
      'main main main main main main';
  gap: 4px;
  background-color: hsl(0, 0%, 94%);
  padding: 4px;
}

.grid-container>div {
  background-color: hsl(0, 0%, 99%);
}

.header>div {
  padding: 0.5rem;
}

input {
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

canvas {
  width: 100%;
  height: 100%;
}

input[type=number] {
  width: 80px;
}