The grid layout simulates the game panel

Simulate a game control panel with a grid layout

 

Set up grids and name regions based on the number of buttons

Then put the button in the corresponding area

<template>
  <div class="panel">
    <div class="direction">
      <div class="btn up">U</div>
      <div class="btn right">R</div>
      <div class="btn down">D</div>
      <div class="btn left">L</div>
    </div>

    <div class="action">
      <div class="action-btn a">S</div>
      <div class="action-btn b">J</div>
      <div class="action-btn c">K</div>
      <div class="action-btn d">L</div>
    </div>
  </div>
</template>
 

<style scoped>
  .panel {
    width: 100%;
    display: flex;
    position: fixed;
    bottom: 0;
    justify-content: space-around;
  }

  .btn {
    width: 30px;
    height: 30px;
    background: gray;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .up {
    grid-area: up;
  }

  .down {
    grid-area: down;
  }

  .left {
    grid-area: left;
  }

  .right {
    grid-area: right;
  }

  .a {
    grid-area: a;
  }

  .b {
    grid-area: b;
  }

  .c {
    grid-area: c;
  }

  .d {
    grid-area: d;
  }

  .action-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: gray;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .direction {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: ". up  ." "left  down right"
  }

  .action {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "a b" "c d"
  }
</style>