Changed from astro to pure solidjs

src/components/Column/Column.sass

@@ -0,0 +1,39 @@
+.column-top
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: flex-start
+  align-items: center
+  align-content: center
+
+.column-center
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: center
+  align-items: center
+  align-content: center
+
+.column-right
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: flex-end
+  align-items: center
+  align-content: center
+
+.column-split
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: space-between
+  align-items: center
+  align-content: center
+
+.column-spaced
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: space-around
+  align-items: center
+  align-content: center

src/components/Column/Column.tsx

@@ -0,0 +1,18 @@
+import './Column.sass'
+import type { JSXElement } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+  content?: 'top' | 'center' | 'right' | 'split' | 'spaced'
+  gap?: number
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+        {props.children}
+      </section>
+    </>
+  )
+}