feat: add column and grid styling to button group

src/components/ButtonGroup.vue

@@ -1,5 +1,14 @@
+<script setup lang="ts">
+interface Props {
+  col?: boolean;
+  grid?: boolean;
+}
+
+defineProps<Props>();
+</script>
+
 <template>
-  <div class="btn-group">
+  <div class="btn-group" :class="{ col: col, grid: grid }">
     <slot></slot>
   </div>
 </template>
@@ -10,6 +19,21 @@
   flex-flow: row wrap;
   justify-content: space-evenly;
 
+  &.col {
+    flex-flow: column nowrap;
+  }
+
+  &.grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    margin: 1rem 0;
+
+    > * {
+      margin: 0;
+    }
+  }
+
   > * {
     flex: var(--button-group-flex);
     margin: 1rem 0;