Add more examples

example/src/App.vue

 <script setup>
 import Grid from "../../src/Grid.vue";
+import CircularCard from "./components/CircularCard.vue";
 </script>
 
 <template>
   <div id="app">
-    <Grid :rows="10" :cols="5" :pos-validation="blockField" v-model="items">
+    <Grid :rows="5" :cols="5" :pos-validation="blockField" v-model="items">
       <div id="blocker">
         This field is blocked because it's filled, the next one programmatically
       </div>
@@ -12,6 +13,11 @@ import Grid from "../../src/Grid.vue";
         <div class="container">{{ item }}</div>
       </template>
     </Grid>
+    <Grid :rows="3" :cols="3" v-model="ticTacToe" class="tic-tac-toe">
+      <template #item="item">
+        <CircularCard> {{ item.key.startsWith("a") ? "X" : "O"}}</CircularCard>
+      </template>
+    </Grid>
   </div>
 </template>
 
@@ -45,6 +51,15 @@ export default {
         },
         { x: 5, y: 3, w: 1, h: 1, key: "obj9", data: {} },
       ],
+      ticTacToe: [
+        { x: 1, y: 1, w: 1, h: 1, key: "a1", data: {} },
+        { x: 1, y: 3, w: 1, h: 1, key: "a2", data: {} },
+        { x: 2, y: 2, w: 1, h: 1, key: "a3", data: {} },
+        { x: 3, y: 2, w: 1, h: 1, key: "a4", data: {} },
+        { x: 3, y: 3, w: 1, h: 1, key: "b1", data: {} },
+        { x: 1, y: 2, w: 1, h: 1, key: "b2", data: {} },
+        { x: 3, y: 1, w: 1, h: 1, key: "b3", data: {} },
+      ]
     };
   },
 };
@@ -76,4 +91,8 @@ export default {
   width: 100%;
   height: 100%;
 }
+
+.tic-tac-toe {
+  max-width: 400px;
+}
 </style>

example/src/components/CircularCard.vue

+<template>
+  <div>
+    <span><slot></slot></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CircularCard",
+};
+</script>
+
+<style scoped>
+div {
+  aspect-ratio: 1/1;
+  border-radius: 100%;
+  min-height: 2em;
+  box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.75);
+  -webkit-box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.75);
+  -moz-box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.75);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: large;
+}
+</style>