Updated

@dasig/components/Column.astro

@@ -0,0 +1,54 @@
+---
+interface Props {
+  content?: 'top' | 'center' | 'right' | 'split' | 'spaced'
+  gap?: number
+}
+
+const { content, gap } = Astro.props
+---
+
+<section class={`dasig-column-${content || 'center'}`} style={`gap: ${gap}rem`}>
+  <slot />
+</section>
+
+<style lang="sass">
+  .dasig-column-top
+    display: flex
+    flex-direction: column
+    flex-wrap: wrap
+    justify-content: flex-start
+    align-items: flex-start
+    align-content: center
+
+  .dasig-column-center
+    display: flex
+    flex-direction: column
+    flex-wrap: wrap
+    justify-content: center
+    align-items: center
+    align-content: center
+
+  .dasig-column-right
+    display: flex
+    flex-direction: column
+    flex-wrap: wrap
+    justify-content: flex-end
+    align-items: center
+    align-content: center
+
+  .dasig-column-split
+    display: flex
+    flex-direction: column
+    flex-wrap: wrap
+    justify-content: space-between
+    align-items: center
+    align-content: center
+
+  .dasig-column-spaced
+    display: flex
+    flex-direction: column
+    flex-wrap: wrap
+    justify-content: space-around
+    align-items: center
+    align-content: center
+</style>