diff --git a/src/node.rs b/src/node.rs
index 9c655a2613d988c6712df13a0f1fa37c8ebc1f8f..dfd3165d4e75b1b28fe130d61bb4c1805791829e 100644
--- a/src/node.rs
+++ b/src/node.rs
@@ -379,27 +379,75 @@ impl<'a> morphorm::Node<'a> for WrappedIndex {
         Some(morphorm::Units::Auto)
     }
 
-    fn grid_rows(&self, _store: &'_ Self::Data) -> Option<Vec<morphorm::Units>> {
+    fn grid_rows(&self, store: &'_ Self::Data) -> Option<Vec<morphorm::Units>> {
+        if let Ok(node) = store.get(self.0) {
+            return match &node.resolved_styles.grid_rows {
+                StyleProp::Default => Some(vec![]),
+                StyleProp::Value(prop) => Some(prop.iter().map(|&x| x.into()).collect()),
+                _ => Some(vec![]),
+            };
+        }
         Some(vec![])
     }
 
-    fn grid_cols(&self, _store: &'_ Self::Data) -> Option<Vec<morphorm::Units>> {
+    fn grid_cols(&self, store: &'_ Self::Data) -> Option<Vec<morphorm::Units>> {
+        if let Ok(node) = store.get(self.0) {
+            return match &node.resolved_styles.grid_cols {
+                StyleProp::Default => Some(vec![]),
+                StyleProp::Value(prop) => Some(prop.iter().map(|&x| x.into()).collect()),
+                _ => Some(vec![]),
+            };
+        }
         Some(vec![])
     }
 
-    fn row_index(&self, _store: &'_ Self::Data) -> Option<usize> {
+    fn row_index(&self, store: &'_ Self::Data) -> Option<usize> {
+        if let Ok(node) = store.get(self.0) {
+            return match node.resolved_styles.row_index {
+                StyleProp::Default => Some(0),
+                StyleProp::Value(prop) => Some(prop),
+                _ => Some(0),
+            };
+        }
         Some(0)
     }
 
-    fn col_index(&self, _store: &'_ Self::Data) -> Option<usize> {
+    fn col_index(&self, store: &'_ Self::Data) -> Option<usize> {
+        if let Ok(node) = store.get(self.0) {
+            return match node.resolved_styles.col_index {
+                StyleProp::Default => {
+                    println!("col_index default");
+                    Some(0)
+                },
+                StyleProp::Value(prop) => {
+                    println!("col_index value {prop}");
+                    Some(prop)
+                },
+                _ => Some(0),
+            };
+        }
         Some(0)
     }
 
-    fn row_span(&self, _store: &'_ Self::Data) -> Option<usize> {
+    fn row_span(&self, store: &'_ Self::Data) -> Option<usize> {
+        if let Ok(node) = store.get(self.0) {
+            return match node.resolved_styles.row_span {
+                StyleProp::Default => Some(1),
+                StyleProp::Value(prop) => Some(prop),
+                _ => Some(1),
+            };
+        }
         Some(1)
     }
 
-    fn col_span(&self, _store: &'_ Self::Data) -> Option<usize> {
+    fn col_span(&self, store: &'_ Self::Data) -> Option<usize> {
+        if let Ok(node) = store.get(self.0) {
+            return match node.resolved_styles.col_span {
+                StyleProp::Default => Some(1),
+                StyleProp::Value(prop) => Some(prop),
+                _ => Some(1),
+            };
+        }
         Some(1)
     }
 
diff --git a/src/styles/style.rs b/src/styles/style.rs
index 70b7f8f17344d4dd1e606ca5530f1cc5c4095bbe..7277196d6e68eeeeddc0bacda6b110cba7813fd2 100644
--- a/src/styles/style.rs
+++ b/src/styles/style.rs
@@ -54,8 +54,8 @@ pub enum StyleProp<T: Default + Clone + Reflect + FromReflect> {
 }
 
 impl<T> Default for StyleProp<T>
-where
-    T: Default + Clone + Reflect + FromReflect,
+    where
+        T: Default + Clone + Reflect + FromReflect,
 {
     fn default() -> Self {
         Self::Unset
@@ -63,8 +63,8 @@ where
 }
 
 impl<T> StyleProp<T>
-where
-    T: Default + Clone + Reflect + FromReflect,
+    where
+        T: Default + Clone + Reflect + FromReflect,
 {
     /// Resolves this style property into a concrete value.
     ///
@@ -374,6 +374,30 @@ define_styles! {
         pub width: StyleProp<Units>,
         /// The z-index relative to it's parent.
         pub z_index: StyleProp<i32>,
+        /// The list of rows when using the grid layout
+        ///
+        /// This is specified in the parent widget and the children have to specify their `row_index`.
+        pub grid_rows: StyleProp<Vec<Units>>,
+        /// The list of columns when using the grid layout
+        ///
+        /// This is specified in the parent widget and the children have to specify their `col_index`.
+        pub grid_cols: StyleProp<Vec<Units>>,
+        /// The row index of this widget when using the grid layout
+        ///
+        /// This references the `grid_rows` property of the parent widget.
+        pub row_index: StyleProp<usize>,
+        /// The column index of this widget when using the grid layout
+        ///
+        /// This references the `grid_cols` property of the parent widget.
+        pub col_index: StyleProp<usize>,
+        /// The number rows that this widget spans when using the grid layout
+        ///
+        /// Specified in the child widget.
+        pub row_span: StyleProp<usize>,
+        /// The number columns that this widget spans when using the grid layout
+        ///
+        /// Specified in the child widget.
+        pub col_span: StyleProp<usize>,
     }
 }
 
@@ -416,6 +440,12 @@ impl KStyle {
             top: StyleProp::Default,
             width: StyleProp::Default,
             z_index: StyleProp::Default,
+            grid_rows: StyleProp::Default,
+            grid_cols: StyleProp::Default,
+            row_index: StyleProp::Default,
+            col_index: StyleProp::Default,
+            row_span: StyleProp::Default,
+            col_span: StyleProp::Default,
         }
     }
 }