Add "grid system" for commands/states layout

[mStirner]

To make it possible to "style" commands and states in terms of alignment, create a simple grid system where them can be placed in.

https://github.com/OpenHausIO/playground/tree/main/vue-grid-layout https://stackoverflow.com/q/77891176/5781499

<template>
    <div :style="{ gridTemplateColumns: `repeat(${numCols}, 1fr)`, gridTemplateRows: `repeat(${numRows}, 1fr)` }" id="grid-container">
      <div v-for="(item, i) in items" :key="i" class="grid-item" :style="{ gridArea: `${item.x} / ${item.y} / span ${item.h} / span ${item.w}` }">
        <h3 style="display: block;">
          {{ item.title }}
        </h3>
        <div style="font-size: 10px; display: none;">
          #{{ i }}&nbsp;
          <span style="color: red;">x</span>= {{ item.x }},&nbsp;
          <span style="color: blue;">y</span>= {{ item.y }},&nbsp;
          <span style="color: yellow;">w</span>= {{ item.w }},&nbsp;
          <span style="color: yellow;">h</span>= {{ item.h }}
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      numCols: 3,
      numRows: 9,
      items: [{
        x: 1, 
        y: 1,
        h: 1,
        w: 1,
        title: "0"
      }, {
        x: 1, 
        y: 2,
        h: 1,
        w: 1,
        title: "1"
      },{
        x: 1, 
        y: 3,
        h: 1,
        w: 1,
        title: "2"
      },{
        x: 2, 
        y: 1,
        h: 1,
        w: 1,
        title: "3"
      },{
        x: 2, 
        y: 2,
        h: 1,
        w: 1,
        title: "4"
      },{
        x: 2, 
        y: 3,
        h: 1,
        w: 1,
        title: "5"
      },{
        x: 3, 
        y: 1,
        h: 1,
        w: 1,
        title: "6"
      },{
        x: 3, 
        y: 2,
        h: 1,
        w: 1,
        title: "7"
      },{
        x: 3, 
        y: 3,
        h: 1,
        w: 1,
        title: "8"
      },{
        x: 4, 
        y: 1,
        h: 1,
        w: 3,
        title: "9"
      },{
        x: 6, 
        y: 1,
        h: 1,
        w: 1,
        title: "Exit"
      },{
        x: 6, 
        y: 3,
        h: 1,
        w: 1,
        title: "Enter"
      },
      {
        x: 8, 
        y: 2,
        h: 1,
        w: 1,
        title: "↑"
      },
      {
        x: 9, 
        y: 2,
        h: 1,
        w: 1,
        title: "↓"
      },
      {
        x: 8, 
        y: 1,
        h: 2,
        w: 1,
        title: "←"
      },
      {
        x: 8, 
        y: 3,
        h: 2,
        w: 1,
        title: "→"
      }
    ],
    };
  },
};
</script>

<style>
@import "@/assets/base.css";
</style>

[mStirner]

---

[mStirner]

• [ ] Add boolean property to add gap between grid via js, https://developer.mozilla.org/en-US/docs/Web/CSS/gap

[mStirner]

Add the ability to display state values as "item"(?)!