Updated

@dasig/components/Row.astro

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