HTML/CSS How Do I use grid-template property

Question

Doing some HTML/CSS coding homework and I want to make a grid-template for my buttons so that they are positioned where they are relative, like in a game where the up button is at the top, right button at the right etc. Any help is appreciated it. Thanks in advance.

#controller>.dpad {
  display: grid;
  grid-template-areas: " main right header footer ";
}

#controller>.dpad>button[env3d-key^="KEY_UP"] {
  grid-area: header;
}

#controller>.dpad>button[env3d-key^="KEY_LEFT"] {
  grid-area: main;
}

#controller>.dpad>button[env3d-key^="KEY_RIGHT"] {
  grid-area: right;
}

#controller>.dpad>button[env3d-key^="KEY_DOWN"] {
  grid-area: footer;
}

<div id="controller">
  <div class="dpad">
    <button env3d-key="KEY_UP">UP</button>
    <button env3d-key="KEY_LEFT">LEFT</button>
    <button env3d-key="KEY_RIGHT">RIGHT</button>
    <button env3d-key="KEY_DOWN">DOWN</button>
  </div>
  <button env3d-key="KEY_A">A</button>
  <button env3d-key="KEY_Z">Z</button>
</div>

Answer 1

#controller>.dpad {
  display: grid;
  grid-template-areas: ". header ."
                      "main . right"
                      ". footer .";
}

#controller>.dpad>button[env3d-key^="KEY_UP"] {
  grid-area: header;
}

#controller>.dpad>button[env3d-key^="KEY_LEFT"] {
  grid-area: main;
}

#controller>.dpad>button[env3d-key^="KEY_RIGHT"] {
  grid-area: right;
}

#controller>.dpad>button[env3d-key^="KEY_DOWN"] {
  grid-area: footer;
}

<div id="controller">
  <div class="dpad">
    <button env3d-key="KEY_UP">UP</button>
    <button env3d-key="KEY_LEFT">LEFT</button>
    <button env3d-key="KEY_RIGHT">RIGHT</button>
    <button env3d-key="KEY_DOWN">DOWN</button>
  </div>
  <button env3d-key="KEY_A">A</button>
  <button env3d-key="KEY_Z">Z</button>
</div>

Use . fo blank areas.