diff --git a/demo/src/app.rs b/demo/src/app.rs
index 32baddf..8c8eb64 100644
--- a/demo/src/app.rs
+++ b/demo/src/app.rs
@@ -25,6 +25,7 @@ pub fn App() -> impl IntoView {
                     <Route path="/table" view=TablePage/>
                     <Route path="/color-picker" view=ColorPickerPage/>
                     <Route path="/alert" view=AlertPage/>
+                    <Route path="/grid" view=GridPage/>
                 </Route>
                 <Route path="/mobile/tabbar" view=TabbarDemoPage/>
                 <Route path="/mobile/nav-bar" view=NavBarDemoPage/>
diff --git a/demo/src/pages/alert/mod.rs b/demo/src/pages/alert/mod.rs
index 682d30b..47a14dd 100644
--- a/demo/src/pages/alert/mod.rs
+++ b/demo/src/pages/alert/mod.rs
@@ -10,9 +10,15 @@ pub fn AlertPage() -> impl IntoView {
             <h1>"Alert"</h1>
             <Demo>
                 <Space vertical=true>
-                    <Alert variant=AlertVariant::SUCCESS title="title">"success"</Alert>
-                    <Alert variant=AlertVariant::WARNING title="title">"warning"</Alert>
-                    <Alert variant=AlertVariant::ERROR title="title">"error"</Alert>
+                    <Alert variant=AlertVariant::SUCCESS title="title">
+                        "success"
+                    </Alert>
+                    <Alert variant=AlertVariant::WARNING title="title">
+                        "warning"
+                    </Alert>
+                    <Alert variant=AlertVariant::ERROR title="title">
+                        "error"
+                    </Alert>
                 </Space>
                 <DemoCode
                     slot
diff --git a/demo/src/pages/color_picker/mod.rs b/demo/src/pages/color_picker/mod.rs
index eaf853d..9bc8518 100644
--- a/demo/src/pages/color_picker/mod.rs
+++ b/demo/src/pages/color_picker/mod.rs
@@ -25,6 +25,7 @@ pub fn ColorPickerPage() -> impl IntoView {
                         "rust"
                     )
                 >
+
                     ""
                 </DemoCode>
             </Demo>
diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs
index baeff1a..b2088a7 100644
--- a/demo/src/pages/components.rs
+++ b/demo/src/pages/components.rs
@@ -44,6 +44,7 @@ pub fn ComponentsPage() -> impl IntoView {
                             <MenuItem key="table" label="Table"/>
                             <MenuItem key="color-picker" label="Color Picker"/>
                             <MenuItem key="alert" label="Alert"/>
+                            <MenuItem key="grid" label="Grid"/>
                         </MenuGroup>
                         <MenuGroup label="Mobile Components">
                             <MenuItem key="tabbar" label="Tabbar"/>
diff --git a/demo/src/pages/grid/mod.rs b/demo/src/pages/grid/mod.rs
new file mode 100644
index 0000000..e791f70
--- /dev/null
+++ b/demo/src/pages/grid/mod.rs
@@ -0,0 +1,125 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+use melt_ui::*;
+use prisms::highlight_str;
+
+#[component]
+pub fn GridPage() -> impl IntoView {
+    mount_style(
+        "grid-demo",
+        r#".melt-grid-item {
+        height: 130px;
+        color: white;
+        text-align: center;
+        line-height: 130px;
+      }
+      .melt-grid-item:nth-child(odd) {
+        background-color: #3d8ae5dd;
+      }
+      .melt-grid-item:nth-child(even) {
+        background-color: #3d8ae5aa;
+      }"#,
+    );
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Grid"</h1>
+            <Demo>
+                <Space vertical=true>
+                    <Grid>
+                        <GridItem>"123"</GridItem>
+                        <GridItem>"456"</GridItem>
+                        <GridItem>"789"</GridItem>
+                    </Grid>
+
+                    <Grid cols=2>
+                        <GridItem>"123"</GridItem>
+                        <GridItem>"456"</GridItem>
+                        <GridItem>"789"</GridItem>
+                    </Grid>
+                </Space>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                        <Grid>
+                            <GridItem>"123"</GridItem>
+                            <GridItem>"456"</GridItem>
+                            <GridItem>"789"</GridItem>
+                        </Grid>
+
+                        <Grid :cols=2>
+                            <GridItem>"123"</GridItem>
+                            <GridItem>"456"</GridItem>
+                            <GridItem>"789"</GridItem>
+                        </Grid>
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+            <h3>"gap"</h3>
+            <Demo>
+                <Grid cols=3 x_gap=8 y_gap=8>
+                    <GridItem>"123"</GridItem>
+                    <GridItem>"321"</GridItem>
+                    <GridItem>"123"</GridItem>
+                    <GridItem>"456"</GridItem>
+                    <GridItem>"7"</GridItem>
+                    <GridItem>"123"</GridItem>
+                    <GridItem>"123"</GridItem>
+                    <GridItem span=2>"1234"</GridItem>
+                    <GridItem>"567"</GridItem>
+                    <GridItem>"567"</GridItem>
+                </Grid>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                        <Grid cols=3 x_gap=8 y_gap=8>
+                            <GridItem>"123"</GridItem>
+                            <GridItem>"321"</GridItem>
+                            <GridItem>"123"</GridItem>
+                            <GridItem>"456"</GridItem>
+                            <GridItem>"7"</GridItem>
+                            <GridItem>"123"</GridItem>
+                            <GridItem>"123"</GridItem>
+                            <GridItem span=2>"1234"</GridItem>
+                            <GridItem >"567"</GridItem>
+                            <GridItem >"567"</GridItem>
+                        </Grid>
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+            <h3>"gap"</h3>
+            <Demo>
+                <Grid cols=4>
+                    <GridItem offset=2>"123"</GridItem>
+                    <GridItem>"456"</GridItem>
+                </Grid>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                        <Grid cols=4>
+                            <GridItem offset=2>"123"</GridItem>
+                            <GridItem>"456"</GridItem>
+                        </Grid>
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+        </div>
+    }
+}
diff --git a/demo/src/pages/mod.rs b/demo/src/pages/mod.rs
index b42f759..ab05bdb 100644
--- a/demo/src/pages/mod.rs
+++ b/demo/src/pages/mod.rs
@@ -3,6 +3,7 @@ mod button;
 mod checkbox;
 mod color_picker;
 mod components;
+mod grid;
 mod home;
 mod image;
 mod input;
@@ -23,6 +24,7 @@ pub use button::*;
 pub use checkbox::*;
 pub use color_picker::*;
 pub use components::*;
+pub use grid::*;
 pub use home::*;
 pub use image::*;
 pub use input::*;
diff --git a/src/alert/mod.rs b/src/alert/mod.rs
index d00bbfc..280a63c 100644
--- a/src/alert/mod.rs
+++ b/src/alert/mod.rs
@@ -82,23 +82,16 @@ pub fn Alert(
         <div class="melt-alert" style=move || css_vars.get()>
             <Icon icon class="melt-alert__icon"/>
             <div>
-                {
-                    move || {
-                        let title = title.get();
-                        if title.is_empty() {
-                            None
-                        } else {
-                            view! {
-                                <div class="melt-alert__header">
-                                    {title}
-                                </div>
-                            }.into()
-                        }
+
+                {move || {
+                    let title = title.get();
+                    if title.is_empty() {
+                        None
+                    } else {
+                        view! { <div class="melt-alert__header">{title}</div> }.into()
                     }
-                }
-                <div class="melt-alert__content">
-                    { children() }
-                </div>
+                }}
+                <div class="melt-alert__content">{children()}</div>
             </div>
         </div>
     }
diff --git a/src/color_picker/mod.rs b/src/color_picker/mod.rs
index e701d98..22bd551 100644
--- a/src/color_picker/mod.rs
+++ b/src/color_picker/mod.rs
@@ -168,8 +168,9 @@ fn ColorPanel(hue: ReadSignal<u16>, sv: RwSignal<(f64, f64)>) -> impl IntoView {
                 class="melt-color-picker-popover__handle"
                 style=move || {
                     format!(
-                        "left: calc({}% - 6px); bottom: calc({}% - 6px)", sv.get().0 * 100.0, sv
-                        .get().1 * 100.0,
+                        "left: calc({}% - 6px); bottom: calc({}% - 6px)",
+                        sv.get().0 * 100.0,
+                        sv.get().1 * 100.0,
                     )
                 }
             >
diff --git a/src/grid/grid_item.rs b/src/grid/grid_item.rs
index a047783..b40c9cd 100644
--- a/src/grid/grid_item.rs
+++ b/src/grid/grid_item.rs
@@ -2,7 +2,7 @@ use super::use_grid;
 use leptos::*;
 
 #[component]
-fn GridItem(
+pub fn GridItem(
     #[prop(default = MaybeSignal::Static(1u16), into)] span: MaybeSignal<u16>,
     #[prop(optional, into)] offset: MaybeSignal<i32>,
     children: Children,
@@ -10,14 +10,14 @@ fn GridItem(
     let grid = use_grid();
 
     let style = create_memo(move |_| {
-        let mut style = String::from("display: grid;");
+        let mut style = String::new();
         let offset = offset.get();
         let span = i32::from(span.get());
         let x_gap = grid.x_gap.get();
 
         if offset > 0 {
             style.push_str(&format!(
-                "margin-left: calc((100% - {}px) / {} * {} + {}px)",
+                "margin-left: calc((100% - {}px) / {} * {} + {}px);",
                 (span + offset - 1) * x_gap,
                 span + offset,
                 offset,
@@ -25,7 +25,7 @@ fn GridItem(
             ));
         }
         style.push_str(&format!(
-            "grid-column: span {} / span {}",
+            "grid-column: span {} / span {};",
             span + offset,
             span + offset
         ));
diff --git a/src/grid/mod.rs b/src/grid/mod.rs
index bf7508d..d3280b8 100644
--- a/src/grid/mod.rs
+++ b/src/grid/mod.rs
@@ -4,13 +4,13 @@ pub use grid_item::*;
 use leptos::*;
 
 #[component]
-fn Grid(
+pub fn Grid(
     #[prop(default = MaybeSignal::Static(1u16), into)] cols: MaybeSignal<u16>,
     #[prop(optional, into)] x_gap: MaybeSignal<i32>,
     #[prop(optional, into)] y_gap: MaybeSignal<i32>,
     children: Children,
 ) -> impl IntoView {
-    let grid_injection_key = create_rw_signal(GridInjectionKey::new(x_gap));
+    let grid_injection_key = GridInjectionKey::new(x_gap);
     provide_context(grid_injection_key);
 
     let style = create_memo(move |_| {
@@ -19,7 +19,7 @@ fn Grid(
             "grid-template-columns: repeat({}, minmax(0px, 1fr));",
             cols.get()
         ));
-        style.push_str(&format!("grid-gap: {}px ${}px;", y_gap.get(), x_gap.get()));
+        style.push_str(&format!("grid-gap: {}px {}px;", y_gap.get(), x_gap.get()));
         style
     });