From 363d0f0c7c67adff37a86727b29fd36ddf064a37 Mon Sep 17 00:00:00 2001
From: Nico Burns <nico@nicoburns.com>
Date: Mon, 17 Apr 2023 17:21:38 +0100
Subject: [PATCH] Add CSS Grid support to `bevy_ui` (#8026)

# Objective

An easy way to create 2D grid layouts

## Solution

Enable the `grid` feature in Taffy and add new style types for defining
grids.

## Notes

- ~I'm having a bit of trouble getting `#[derive(Reflect)]` to work
properly. Help with that would be appreciated (EDIT: got it to compile
by ignoring the problematic fields, but this presumably can't be
merged).~ This is now fixed
- ~The alignment types now have a `Normal` variant because I couldn't
get reflect to work with `Option`.~ I've decided to stick with the
flattened variant, as it saves a level of wrapping when authoring
styles. But I've renamed the variants from `Normal` to `Default`.
- ~This currently exposes a simplified API on top of grid. In particular
the following is not currently supported:~
   - ~Negative grid indices~ Now supported.
- ~Custom `end` values for grid placement (you can only use `start` and
`span`)~ Now supported
- ~`minmax()` track sizing functions~ minmax is now support through a
`GridTrack::minmax()` constructor
   - ~`repeat()`~ repeat is now implemented as `RepeatedGridTrack`

- ~Documentation still needs to be improved.~ An initial pass over the
documentation has been completed.

## Screenshot

<img width="846" alt="Screenshot 2023-03-10 at 17 56 21"
src="https://user-images.githubusercontent.com/1007307/224435332-69aa9eac-123d-4856-b75d-5449d3f1d426.png">

---

## Changelog

- Support for CSS Grid layout added to `bevy_ui`

---------

Co-authored-by: Rob Parrett <robparrett@gmail.com>
Co-authored-by: Andreas Weibye <13300393+Weibye@users.noreply.github.com>
---
 Cargo.toml                                    |  12 +-
 crates/bevy_ui/Cargo.toml                     |   2 +-
 .../bevy_ui/src/{flex => layout}/convert.rs   | 322 +++++-
 crates/bevy_ui/src/{flex => layout}/mod.rs    |  59 +-
 crates/bevy_ui/src/lib.rs                     |  29 +-
 crates/bevy_ui/src/node_bundles.rs            |  17 +-
 crates/bevy_ui/src/ui_node.rs                 | 926 ++++++++++++++++--
 examples/README.md                            |   1 +
 examples/ui/grid.rs                           | 218 +++++
 9 files changed, 1415 insertions(+), 171 deletions(-)
 rename crates/bevy_ui/src/{flex => layout}/convert.rs (57%)
 rename crates/bevy_ui/src/{flex => layout}/mod.rs (88%)
 create mode 100644 examples/ui/grid.rs

diff --git a/Cargo.toml b/Cargo.toml
index cec3985f61..7df77f3ffd 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1806,7 +1806,17 @@ path = "examples/ui/flex_layout.rs"
 name = "Flex Layout"
 description = "Demonstrates how the AlignItems and JustifyContent properties can be composed to layout nodes and position text"
 category = "UI (User Interface)"
-wasm = false
+wasm = true
+
+[[example]]
+name = "grid"
+path = "examples/ui/grid.rs"
+
+[package.metadata.example.grid]
+name = "CSS Grid"
+description = "An example for CSS Grid layout"
+category = "UI (User Interface)"
+wasm = true
 
 [[example]]
 name = "transparency_ui"
diff --git a/crates/bevy_ui/Cargo.toml b/crates/bevy_ui/Cargo.toml
index b927f278fe..0f3bf3320f 100644
--- a/crates/bevy_ui/Cargo.toml
+++ b/crates/bevy_ui/Cargo.toml
@@ -31,7 +31,7 @@ bevy_window = { path = "../bevy_window", version = "0.11.0-dev" }
 bevy_utils = { path = "../bevy_utils", version = "0.11.0-dev" }
 
 # other
-taffy = { version = "0.3.10", default-features = false, features = ["std"] }
+taffy = { version = "0.3.10" }
 serde = { version = "1", features = ["derive"] }
 smallvec = { version = "1.6", features = ["union", "const_generics"] }
 bytemuck = { version = "1.5", features = ["derive"] }
diff --git a/crates/bevy_ui/src/flex/convert.rs b/crates/bevy_ui/src/layout/convert.rs
similarity index 57%
rename from crates/bevy_ui/src/flex/convert.rs
rename to crates/bevy_ui/src/layout/convert.rs
index a2bb1af48c..62114d5c28 100644
--- a/crates/bevy_ui/src/flex/convert.rs
+++ b/crates/bevy_ui/src/layout/convert.rs
@@ -1,6 +1,10 @@
+use taffy::style_helpers;
+
 use crate::{
-    AlignContent, AlignItems, AlignSelf, Display, FlexDirection, FlexWrap, JustifyContent,
-    PositionType, Size, Style, UiRect, Val,
+    AlignContent, AlignItems, AlignSelf, Display, FlexDirection, FlexWrap, GridAutoFlow,
+    GridPlacement, GridTrack, GridTrackRepetition, JustifyContent, JustifyItems, JustifySelf,
+    MaxTrackSizingFunction, MinTrackSizingFunction, PositionType, RepeatedGridTrack, Size, Style,
+    UiRect, Val,
 };
 
 use super::LayoutContext;
@@ -74,10 +78,12 @@ pub fn from_style(context: &LayoutContext, style: &Style) -> taffy::style::Style
         position: style.position_type.into(),
         flex_direction: style.flex_direction.into(),
         flex_wrap: style.flex_wrap.into(),
-        align_items: Some(style.align_items.into()),
+        align_items: style.align_items.into(),
+        justify_items: style.justify_items.into(),
         align_self: style.align_self.into(),
-        align_content: Some(style.align_content.into()),
-        justify_content: Some(style.justify_content.into()),
+        justify_self: style.justify_self.into(),
+        align_content: style.align_content.into(),
+        justify_content: style.justify_content.into(),
         inset: taffy::prelude::Rect {
             left: style.left.into_length_percentage_auto(context),
             right: style.right.into_length_percentage_auto(context),
@@ -107,20 +113,56 @@ pub fn from_style(context: &LayoutContext, style: &Style) -> taffy::style::Style
         gap: style
             .gap
             .map_to_taffy_size(|s| s.into_length_percentage(context)),
-        justify_self: None,
+        grid_auto_flow: style.grid_auto_flow.into(),
+        grid_template_rows: style
+            .grid_template_rows
+            .iter()
+            .map(|track| track.clone_into_repeated_taffy_track(context))
+            .collect::<Vec<_>>(),
+        grid_template_columns: style
+            .grid_template_columns
+            .iter()
+            .map(|track| track.clone_into_repeated_taffy_track(context))
+            .collect::<Vec<_>>(),
+        grid_auto_rows: style
+            .grid_auto_rows
+            .iter()
+            .map(|track| track.into_taffy_track(context))
+            .collect::<Vec<_>>(),
+        grid_auto_columns: style
+            .grid_auto_columns
+            .iter()
+            .map(|track| track.into_taffy_track(context))
+            .collect::<Vec<_>>(),
+        grid_row: style.grid_row.into(),
+        grid_column: style.grid_column.into(),
     }
 }
 
-impl From<AlignItems> for taffy::style::AlignItems {
+impl From<AlignItems> for Option<taffy::style::AlignItems> {
     fn from(value: AlignItems) -> Self {
         match value {
-            AlignItems::Start => taffy::style::AlignItems::Start,
-            AlignItems::End => taffy::style::AlignItems::End,
-            AlignItems::FlexStart => taffy::style::AlignItems::FlexStart,
-            AlignItems::FlexEnd => taffy::style::AlignItems::FlexEnd,
-            AlignItems::Center => taffy::style::AlignItems::Center,
-            AlignItems::Baseline => taffy::style::AlignItems::Baseline,
-            AlignItems::Stretch => taffy::style::AlignItems::Stretch,
+            AlignItems::Default => None,
+            AlignItems::Start => taffy::style::AlignItems::Start.into(),
+            AlignItems::End => taffy::style::AlignItems::End.into(),
+            AlignItems::FlexStart => taffy::style::AlignItems::FlexStart.into(),
+            AlignItems::FlexEnd => taffy::style::AlignItems::FlexEnd.into(),
+            AlignItems::Center => taffy::style::AlignItems::Center.into(),
+            AlignItems::Baseline => taffy::style::AlignItems::Baseline.into(),
+            AlignItems::Stretch => taffy::style::AlignItems::Stretch.into(),
+        }
+    }
+}
+
+impl From<JustifyItems> for Option<taffy::style::JustifyItems> {
+    fn from(value: JustifyItems) -> Self {
+        match value {
+            JustifyItems::Default => None,
+            JustifyItems::Start => taffy::style::JustifyItems::Start.into(),
+            JustifyItems::End => taffy::style::JustifyItems::End.into(),
+            JustifyItems::Center => taffy::style::JustifyItems::Center.into(),
+            JustifyItems::Baseline => taffy::style::JustifyItems::Baseline.into(),
+            JustifyItems::Stretch => taffy::style::JustifyItems::Stretch.into(),
         }
     }
 }
@@ -140,18 +182,48 @@ impl From<AlignSelf> for Option<taffy::style::AlignSelf> {
     }
 }
 
-impl From<AlignContent> for taffy::style::AlignContent {
+impl From<JustifySelf> for Option<taffy::style::JustifySelf> {
+    fn from(value: JustifySelf) -> Self {
+        match value {
+            JustifySelf::Auto => None,
+            JustifySelf::Start => taffy::style::JustifySelf::Start.into(),
+            JustifySelf::End => taffy::style::JustifySelf::End.into(),
+            JustifySelf::Center => taffy::style::JustifySelf::Center.into(),
+            JustifySelf::Baseline => taffy::style::JustifySelf::Baseline.into(),
+            JustifySelf::Stretch => taffy::style::JustifySelf::Stretch.into(),
+        }
+    }
+}
+
+impl From<AlignContent> for Option<taffy::style::AlignContent> {
     fn from(value: AlignContent) -> Self {
         match value {
-            AlignContent::Start => taffy::style::AlignContent::Start,
-            AlignContent::End => taffy::style::AlignContent::End,
-            AlignContent::FlexStart => taffy::style::AlignContent::FlexStart,
-            AlignContent::FlexEnd => taffy::style::AlignContent::FlexEnd,
-            AlignContent::Center => taffy::style::AlignContent::Center,
-            AlignContent::Stretch => taffy::style::AlignContent::Stretch,
-            AlignContent::SpaceBetween => taffy::style::AlignContent::SpaceBetween,
-            AlignContent::SpaceAround => taffy::style::AlignContent::SpaceAround,
-            AlignContent::SpaceEvenly => taffy::style::AlignContent::SpaceEvenly,
+            AlignContent::Default => None,
+            AlignContent::Start => taffy::style::AlignContent::Start.into(),
+            AlignContent::End => taffy::style::AlignContent::End.into(),
+            AlignContent::FlexStart => taffy::style::AlignContent::FlexStart.into(),
+            AlignContent::FlexEnd => taffy::style::AlignContent::FlexEnd.into(),
+            AlignContent::Center => taffy::style::AlignContent::Center.into(),
+            AlignContent::Stretch => taffy::style::AlignContent::Stretch.into(),
+            AlignContent::SpaceBetween => taffy::style::AlignContent::SpaceBetween.into(),
+            AlignContent::SpaceAround => taffy::style::AlignContent::SpaceAround.into(),
+            AlignContent::SpaceEvenly => taffy::style::AlignContent::SpaceEvenly.into(),
+        }
+    }
+}
+
+impl From<JustifyContent> for Option<taffy::style::JustifyContent> {
+    fn from(value: JustifyContent) -> Self {
+        match value {
+            JustifyContent::Default => None,
+            JustifyContent::Start => taffy::style::JustifyContent::Start.into(),
+            JustifyContent::End => taffy::style::JustifyContent::End.into(),
+            JustifyContent::FlexStart => taffy::style::JustifyContent::FlexStart.into(),
+            JustifyContent::FlexEnd => taffy::style::JustifyContent::FlexEnd.into(),
+            JustifyContent::Center => taffy::style::JustifyContent::Center.into(),
+            JustifyContent::SpaceBetween => taffy::style::JustifyContent::SpaceBetween.into(),
+            JustifyContent::SpaceAround => taffy::style::JustifyContent::SpaceAround.into(),
+            JustifyContent::SpaceEvenly => taffy::style::JustifyContent::SpaceEvenly.into(),
         }
     }
 }
@@ -160,6 +232,7 @@ impl From<Display> for taffy::style::Display {
     fn from(value: Display) -> Self {
         match value {
             Display::Flex => taffy::style::Display::Flex,
+            Display::Grid => taffy::style::Display::Grid,
             Display::None => taffy::style::Display::None,
         }
     }
@@ -176,21 +249,6 @@ impl From<FlexDirection> for taffy::style::FlexDirection {
     }
 }
 
-impl From<JustifyContent> for taffy::style::JustifyContent {
-    fn from(value: JustifyContent) -> Self {
-        match value {
-            JustifyContent::Start => taffy::style::JustifyContent::Start,
-            JustifyContent::End => taffy::style::JustifyContent::End,
-            JustifyContent::FlexStart => taffy::style::JustifyContent::FlexStart,
-            JustifyContent::FlexEnd => taffy::style::JustifyContent::FlexEnd,
-            JustifyContent::Center => taffy::style::JustifyContent::Center,
-            JustifyContent::SpaceBetween => taffy::style::JustifyContent::SpaceBetween,
-            JustifyContent::SpaceAround => taffy::style::JustifyContent::SpaceAround,
-            JustifyContent::SpaceEvenly => taffy::style::JustifyContent::SpaceEvenly,
-        }
-    }
-}
-
 impl From<PositionType> for taffy::style::Position {
     fn from(value: PositionType) -> Self {
         match value {
@@ -210,12 +268,140 @@ impl From<FlexWrap> for taffy::style::FlexWrap {
     }
 }
 
+impl From<GridAutoFlow> for taffy::style::GridAutoFlow {
+    fn from(value: GridAutoFlow) -> Self {
+        match value {
+            GridAutoFlow::Row => taffy::style::GridAutoFlow::Row,
+            GridAutoFlow::RowDense => taffy::style::GridAutoFlow::RowDense,
+            GridAutoFlow::Column => taffy::style::GridAutoFlow::Column,
+            GridAutoFlow::ColumnDense => taffy::style::GridAutoFlow::ColumnDense,
+        }
+    }
+}
+
+impl From<GridPlacement> for taffy::geometry::Line<taffy::style::GridPlacement> {
+    fn from(value: GridPlacement) -> Self {
+        let span = value.span.unwrap_or(1).max(1);
+        match (value.start, value.end) {
+            (Some(start), Some(end)) => taffy::geometry::Line {
+                start: style_helpers::line(start),
+                end: style_helpers::line(end),
+            },
+            (Some(start), None) => taffy::geometry::Line {
+                start: style_helpers::line(start),
+                end: style_helpers::span(span),
+            },
+            (None, Some(end)) => taffy::geometry::Line {
+                start: style_helpers::span(span),
+                end: style_helpers::line(end),
+            },
+            (None, None) => style_helpers::span(span),
+        }
+    }
+}
+
+impl MinTrackSizingFunction {
+    fn into_taffy(self, context: &LayoutContext) -> taffy::style::MinTrackSizingFunction {
+        match self {
+            MinTrackSizingFunction::Px(val) => taffy::style::MinTrackSizingFunction::Fixed(
+                Val::Px(val).into_length_percentage(context),
+            ),
+            MinTrackSizingFunction::Percent(val) => taffy::style::MinTrackSizingFunction::Fixed(
+                Val::Percent(val).into_length_percentage(context),
+            ),
+            MinTrackSizingFunction::Auto => taffy::style::MinTrackSizingFunction::Auto,
+            MinTrackSizingFunction::MinContent => taffy::style::MinTrackSizingFunction::MinContent,
+            MinTrackSizingFunction::MaxContent => taffy::style::MinTrackSizingFunction::MaxContent,
+        }
+    }
+}
+
+impl MaxTrackSizingFunction {
+    fn into_taffy(self, context: &LayoutContext) -> taffy::style::MaxTrackSizingFunction {
+        match self {
+            MaxTrackSizingFunction::Px(val) => taffy::style::MaxTrackSizingFunction::Fixed(
+                Val::Px(val).into_length_percentage(context),
+            ),
+            MaxTrackSizingFunction::Percent(val) => taffy::style::MaxTrackSizingFunction::Fixed(
+                Val::Percent(val).into_length_percentage(context),
+            ),
+            MaxTrackSizingFunction::Auto => taffy::style::MaxTrackSizingFunction::Auto,
+            MaxTrackSizingFunction::MinContent => taffy::style::MaxTrackSizingFunction::MinContent,
+            MaxTrackSizingFunction::MaxContent => taffy::style::MaxTrackSizingFunction::MaxContent,
+            MaxTrackSizingFunction::FitContentPx(val) => {
+                taffy::style::MaxTrackSizingFunction::FitContent(
+                    Val::Px(val).into_length_percentage(context),
+                )
+            }
+            MaxTrackSizingFunction::FitContentPercent(val) => {
+                taffy::style::MaxTrackSizingFunction::FitContent(
+                    Val::Percent(val).into_length_percentage(context),
+                )
+            }
+            MaxTrackSizingFunction::Fraction(fraction) => {
+                taffy::style::MaxTrackSizingFunction::Fraction(fraction)
+            }
+        }
+    }
+}
+
+impl GridTrack {
+    fn into_taffy_track(
+        self,
+        context: &LayoutContext,
+    ) -> taffy::style::NonRepeatedTrackSizingFunction {
+        let min = self.min_sizing_function.into_taffy(context);
+        let max = self.max_sizing_function.into_taffy(context);
+        taffy::style_helpers::minmax(min, max)
+    }
+}
+
+impl RepeatedGridTrack {
+    fn clone_into_repeated_taffy_track(
+        &self,
+        context: &LayoutContext,
+    ) -> taffy::style::TrackSizingFunction {
+        if self.tracks.len() == 1 && self.repetition == GridTrackRepetition::Count(1) {
+            let min = self.tracks[0].min_sizing_function.into_taffy(context);
+            let max = self.tracks[0].max_sizing_function.into_taffy(context);
+            let taffy_track = taffy::style_helpers::minmax(min, max);
+            taffy::style::TrackSizingFunction::Single(taffy_track)
+        } else {
+            let taffy_tracks: Vec<_> = self
+                .tracks
+                .iter()
+                .map(|track| {
+                    let min = track.min_sizing_function.into_taffy(context);
+                    let max = track.max_sizing_function.into_taffy(context);
+                    taffy::style_helpers::minmax(min, max)
+                })
+                .collect();
+
+            match self.repetition {
+                GridTrackRepetition::Count(count) => {
+                    taffy::style_helpers::repeat(count, taffy_tracks)
+                }
+                GridTrackRepetition::AutoFit => taffy::style_helpers::repeat(
+                    taffy::style::GridTrackRepetition::AutoFit,
+                    taffy_tracks,
+                ),
+                GridTrackRepetition::AutoFill => taffy::style_helpers::repeat(
+                    taffy::style::GridTrackRepetition::AutoFill,
+                    taffy_tracks,
+                ),
+            }
+        }
+    }
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
 
     #[test]
     fn test_convert_from() {
+        use taffy::style_helpers as sh;
+
         let bevy_style = crate::Style {
             display: Display::Flex,
             position_type: PositionType::Absolute,
@@ -229,6 +415,8 @@ mod tests {
             align_items: AlignItems::Baseline,
             align_self: AlignSelf::Start,
             align_content: AlignContent::SpaceAround,
+            justify_items: JustifyItems::Default,
+            justify_self: JustifySelf::Center,
             justify_content: JustifyContent::SpaceEvenly,
             margin: UiRect {
                 left: Val::Percent(0.),
@@ -269,6 +457,25 @@ mod tests {
                 width: Val::Px(0.),
                 height: Val::Percent(0.),
             },
+            grid_auto_flow: GridAutoFlow::ColumnDense,
+            grid_template_rows: vec![
+                GridTrack::px(10.0),
+                GridTrack::percent(50.0),
+                GridTrack::fr(1.0),
+            ],
+            grid_template_columns: RepeatedGridTrack::px(5, 10.0),
+            grid_auto_rows: vec![
+                GridTrack::fit_content_px(10.0),
+                GridTrack::fit_content_percent(25.0),
+                GridTrack::flex(2.0),
+            ],
+            grid_auto_columns: vec![
+                GridTrack::auto(),
+                GridTrack::min_content(),
+                GridTrack::max_content(),
+            ],
+            grid_column: GridPlacement::start(4),
+            grid_row: GridPlacement::span(3),
         };
         let viewport_values = LayoutContext::new(1.0, bevy_math::Vec2::new(800., 600.));
         let taffy_style = from_style(&viewport_values, &bevy_style);
@@ -308,6 +515,11 @@ mod tests {
             taffy_style.justify_content,
             Some(taffy::style::JustifyContent::SpaceEvenly)
         );
+        assert_eq!(taffy_style.justify_items, None);
+        assert_eq!(
+            taffy_style.justify_self,
+            Some(taffy::style::JustifySelf::Center)
+        );
         assert!(matches!(
             taffy_style.margin.left,
             taffy::style::LengthPercentageAuto::Percent(_)
@@ -395,6 +607,38 @@ mod tests {
             taffy_style.gap.height,
             taffy::style::LengthPercentage::Percent(0.)
         );
+        assert_eq!(
+            taffy_style.grid_auto_flow,
+            taffy::style::GridAutoFlow::ColumnDense
+        );
+        assert_eq!(
+            taffy_style.grid_template_rows,
+            vec![sh::points(10.0), sh::percent(0.5), sh::fr(1.0)]
+        );
+        assert_eq!(
+            taffy_style.grid_template_columns,
+            vec![sh::repeat(5, vec![sh::points(10.0)])]
+        );
+        assert_eq!(
+            taffy_style.grid_auto_rows,
+            vec![
+                sh::fit_content(taffy::style::LengthPercentage::Points(10.0)),
+                sh::fit_content(taffy::style::LengthPercentage::Percent(0.25)),
+                sh::minmax(sh::points(0.0), sh::fr(2.0)),
+            ]
+        );
+        assert_eq!(
+            taffy_style.grid_auto_columns,
+            vec![sh::auto(), sh::min_content(), sh::max_content()]
+        );
+        assert_eq!(
+            taffy_style.grid_column,
+            taffy::geometry::Line {
+                start: sh::line(4),
+                end: sh::span(1)
+            }
+        );
+        assert_eq!(taffy_style.grid_row, sh::span(3));
     }
 
     #[test]
diff --git a/crates/bevy_ui/src/flex/mod.rs b/crates/bevy_ui/src/layout/mod.rs
similarity index 88%
rename from crates/bevy_ui/src/flex/mod.rs
rename to crates/bevy_ui/src/layout/mod.rs
index 748b0450e6..077f8a8987 100644
--- a/crates/bevy_ui/src/flex/mod.rs
+++ b/crates/bevy_ui/src/layout/mod.rs
@@ -42,32 +42,29 @@ impl LayoutContext {
 }
 
 #[derive(Resource)]
-pub struct FlexSurface {
+pub struct UiSurface {
     entity_to_taffy: HashMap<Entity, taffy::node::Node>,
     window_nodes: HashMap<Entity, taffy::node::Node>,
     taffy: Taffy,
 }
 
-// SAFETY: as long as MeasureFunc is Send + Sync. https://github.com/DioxusLabs/taffy/issues/146
-unsafe impl Send for FlexSurface {}
-unsafe impl Sync for FlexSurface {}
-
-fn _assert_send_sync_flex_surface_impl_safe() {
+fn _assert_send_sync_ui_surface_impl_safe() {
     fn _assert_send_sync<T: Send + Sync>() {}
     _assert_send_sync::<HashMap<Entity, taffy::node::Node>>();
     _assert_send_sync::<Taffy>();
+    _assert_send_sync::<UiSurface>();
 }
 
-impl fmt::Debug for FlexSurface {
+impl fmt::Debug for UiSurface {
     fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
-        f.debug_struct("FlexSurface")
+        f.debug_struct("UiSurface")
             .field("entity_to_taffy", &self.entity_to_taffy)
             .field("window_nodes", &self.window_nodes)
             .finish()
     }
 }
 
-impl Default for FlexSurface {
+impl Default for UiSurface {
     fn default() -> Self {
         Self {
             entity_to_taffy: Default::default(),
@@ -77,7 +74,7 @@ impl Default for FlexSurface {
     }
 }
 
-impl FlexSurface {
+impl UiSurface {
     pub fn upsert_node(&mut self, entity: Entity, style: &Style, context: &LayoutContext) {
         let mut added = false;
         let taffy = &mut self.taffy;
@@ -217,35 +214,35 @@ without UI components as a child of an entity with UI components, results may be
         }
     }
 
-    pub fn get_layout(&self, entity: Entity) -> Result<&taffy::layout::Layout, FlexError> {
+    pub fn get_layout(&self, entity: Entity) -> Result<&taffy::layout::Layout, LayoutError> {
         if let Some(taffy_node) = self.entity_to_taffy.get(&entity) {
             self.taffy
                 .layout(*taffy_node)
-                .map_err(FlexError::TaffyError)
+                .map_err(LayoutError::TaffyError)
         } else {
             warn!(
                 "Styled child in a non-UI entity hierarchy. You are using an entity \
 with UI components as a child of an entity without UI components, results may be unexpected."
             );
-            Err(FlexError::InvalidHierarchy)
+            Err(LayoutError::InvalidHierarchy)
         }
     }
 }
 
 #[derive(Debug)]
-pub enum FlexError {
+pub enum LayoutError {
     InvalidHierarchy,
     TaffyError(taffy::error::TaffyError),
 }
 
 #[allow(clippy::too_many_arguments)]
-pub fn flex_node_system(
+pub fn ui_layout_system(
     primary_window: Query<(Entity, &Window), With<PrimaryWindow>>,
     windows: Query<(Entity, &Window)>,
     ui_scale: Res<UiScale>,
     mut scale_factor_events: EventReader<WindowScaleFactorChanged>,
     mut resize_events: EventReader<bevy_window::WindowResized>,
-    mut flex_surface: ResMut<FlexSurface>,
+    mut ui_surface: ResMut<UiSurface>,
     root_node_query: Query<Entity, (With<Node>, Without<Parent>)>,
     node_query: Query<(Entity, &Style, Option<&CalculatedSize>), (With<Node>, Changed<Style>)>,
     full_node_query: Query<(Entity, &Style, Option<&CalculatedSize>), With<Node>>,
@@ -281,7 +278,7 @@ pub fn flex_node_system(
 
     // update window root nodes
     for (entity, window) in windows.iter() {
-        flex_surface.update_window(entity, &window.resolution);
+        ui_surface.update_window(entity, &window.resolution);
     }
 
     let scale_factor = logical_to_physical_factor * ui_scale.scale;
@@ -289,7 +286,7 @@ pub fn flex_node_system(
     let viewport_values = LayoutContext::new(scale_factor, physical_size);
 
     fn update_changed<F: ReadOnlyWorldQuery>(
-        flex_surface: &mut FlexSurface,
+        ui_surface: &mut UiSurface,
         viewport_values: &LayoutContext,
         query: Query<(Entity, &Style, Option<&CalculatedSize>), F>,
     ) {
@@ -297,45 +294,45 @@ pub fn flex_node_system(
         for (entity, style, calculated_size) in &query {
             // TODO: remove node from old hierarchy if its root has changed
             if let Some(calculated_size) = calculated_size {
-                flex_surface.upsert_leaf(entity, style, calculated_size, viewport_values);
+                ui_surface.upsert_leaf(entity, style, calculated_size, viewport_values);
             } else {
-                flex_surface.upsert_node(entity, style, viewport_values);
+                ui_surface.upsert_node(entity, style, viewport_values);
             }
         }
     }
 
     if !scale_factor_events.is_empty() || ui_scale.is_changed() || resized {
         scale_factor_events.clear();
-        update_changed(&mut flex_surface, &viewport_values, full_node_query);
+        update_changed(&mut ui_surface, &viewport_values, full_node_query);
     } else {
-        update_changed(&mut flex_surface, &viewport_values, node_query);
+        update_changed(&mut ui_surface, &viewport_values, node_query);
     }
 
     for (entity, style, calculated_size) in &changed_size_query {
-        flex_surface.upsert_leaf(entity, style, calculated_size, &viewport_values);
+        ui_surface.upsert_leaf(entity, style, calculated_size, &viewport_values);
     }
 
     // clean up removed nodes
-    flex_surface.remove_entities(removed_nodes.iter());
+    ui_surface.remove_entities(removed_nodes.iter());
 
     // When a `CalculatedSize` component is removed from an entity, we need to remove the measure from the corresponding taffy node.
     for entity in removed_calculated_sizes.iter() {
-        flex_surface.try_remove_measure(entity);
+        ui_surface.try_remove_measure(entity);
     }
 
     // update window children (for now assuming all Nodes live in the primary window)
-    flex_surface.set_window_children(primary_window_entity, root_node_query.iter());
+    ui_surface.set_window_children(primary_window_entity, root_node_query.iter());
 
     // update and remove children
     for entity in removed_children.iter() {
-        flex_surface.try_remove_children(entity);
+        ui_surface.try_remove_children(entity);
     }
     for (entity, children) in &children_query {
-        flex_surface.update_children(entity, children);
+        ui_surface.update_children(entity, children);
     }
 
     // compute layouts
-    flex_surface.compute_window_layouts();
+    ui_surface.compute_window_layouts();
 
     let physical_to_logical_factor = 1. / logical_to_physical_factor;
 
@@ -343,7 +340,7 @@ pub fn flex_node_system(
 
     // PERF: try doing this incrementally
     for (entity, mut node, mut transform, parent) in &mut node_transform_query {
-        let layout = flex_surface.get_layout(entity).unwrap();
+        let layout = ui_surface.get_layout(entity).unwrap();
         let new_size = Vec2::new(
             to_logical(layout.size.width),
             to_logical(layout.size.height),
@@ -356,7 +353,7 @@ pub fn flex_node_system(
         new_position.x = to_logical(layout.location.x + layout.size.width / 2.0);
         new_position.y = to_logical(layout.location.y + layout.size.height / 2.0);
         if let Some(parent) = parent {
-            if let Ok(parent_layout) = flex_surface.get_layout(**parent) {
+            if let Ok(parent_layout) = ui_surface.get_layout(**parent) {
                 new_position.x -= to_logical(parent_layout.size.width / 2.0);
                 new_position.y -= to_logical(parent_layout.size.height / 2.0);
             }
diff --git a/crates/bevy_ui/src/lib.rs b/crates/bevy_ui/src/lib.rs
index 983130d555..38d583740a 100644
--- a/crates/bevy_ui/src/lib.rs
+++ b/crates/bevy_ui/src/lib.rs
@@ -3,10 +3,10 @@
 //! This crate contains Bevy's UI system, which can be used to create UI for both 2D and 3D games
 //! # Basic usage
 //! Spawn UI elements with [`node_bundles::ButtonBundle`], [`node_bundles::ImageBundle`], [`node_bundles::TextBundle`] and [`node_bundles::NodeBundle`]
-//! This UI is laid out with the Flexbox layout model (see <https://cssreference.io/flexbox/>)
-mod flex;
+//! This UI is laid out with the Flexbox and CSS Grid layout models (see <https://cssreference.io/flexbox/>)
 mod focus;
 mod geometry;
+mod layout;
 mod render;
 mod stack;
 mod ui_node;
@@ -22,9 +22,9 @@ pub mod widget;
 #[cfg(feature = "bevy_text")]
 use bevy_render::camera::CameraUpdateSystem;
 use bevy_render::extract_component::ExtractComponentPlugin;
-pub use flex::*;
 pub use focus::*;
 pub use geometry::*;
+pub use layout::*;
 pub use measurement::*;
 pub use render::*;
 pub use ui_node::*;
@@ -54,8 +54,8 @@ pub struct UiPlugin;
 /// The label enum labeling the types of systems in the Bevy UI
 #[derive(Debug, Hash, PartialEq, Eq, Clone, SystemSet)]
 pub enum UiSystem {
-    /// After this label, the ui flex state has been updated
-    Flex,
+    /// After this label, the ui layout state has been updated
+    Layout,
     /// After this label, input interactions with UI entities have been updated for this frame
     Focus,
     /// After this label, the [`UiStack`] resource has been updated
@@ -81,7 +81,7 @@ impl Default for UiScale {
 impl Plugin for UiPlugin {
     fn build(&self, app: &mut App) {
         app.add_plugin(ExtractComponentPlugin::<UiCameraConfig>::default())
-            .init_resource::<FlexSurface>()
+            .init_resource::<UiSurface>()
             .init_resource::<UiScale>()
             .init_resource::<UiStack>()
             .register_type::<AlignContent>()
@@ -92,9 +92,15 @@ impl Plugin for UiPlugin {
             .register_type::<Display>()
             .register_type::<FlexDirection>()
             .register_type::<FlexWrap>()
+            .register_type::<GridAutoFlow>()
+            .register_type::<GridPlacement>()
+            .register_type::<GridTrack>()
+            .register_type::<RepeatedGridTrack>()
             .register_type::<FocusPolicy>()
             .register_type::<Interaction>()
             .register_type::<JustifyContent>()
+            .register_type::<JustifyItems>()
+            .register_type::<JustifySelf>()
             .register_type::<Node>()
             // NOTE: used by Style::aspect_ratio
             .register_type::<Option<f32>>()
@@ -116,8 +122,8 @@ impl Plugin for UiPlugin {
         #[cfg(feature = "bevy_text")]
         app.add_systems(
             PostUpdate,
-            widget::measure_text_system
-                .before(UiSystem::Flex)
+            widget::text_system
+                .before(UiSystem::Layout)
                 // Potential conflict: `Assets<Image>`
                 // In practice, they run independently since `bevy_render::camera_update_system`
                 // will only ever observe its own render target, and `widget::text_system`
@@ -131,7 +137,7 @@ impl Plugin for UiPlugin {
         #[cfg(feature = "bevy_text")]
         app.add_plugin(accessibility::AccessibilityPlugin);
         app.add_systems(PostUpdate, {
-            let system = widget::update_image_calculated_size_system.before(UiSystem::Flex);
+            let system = widget::update_image_calculated_size_system.before(UiSystem::Layout);
             // Potential conflicts: `Assets<Image>`
             // They run independently since `widget::image_node_system` will only ever observe
             // its own UiImage, and `widget::text_system` & `bevy_text::update_text2d_layout`
@@ -146,12 +152,11 @@ impl Plugin for UiPlugin {
         .add_systems(
             PostUpdate,
             (
-                flex_node_system
-                    .in_set(UiSystem::Flex)
+                ui_layout_system
+                    .in_set(UiSystem::Layout)
                     .before(TransformSystem::TransformPropagate),
                 ui_stack_system.in_set(UiSystem::Stack),
                 update_clipping_system.after(TransformSystem::TransformPropagate),
-                widget::text_system.after(UiSystem::Flex),
             ),
         );
 
diff --git a/crates/bevy_ui/src/node_bundles.rs b/crates/bevy_ui/src/node_bundles.rs
index 1219597269..3b068e557b 100644
--- a/crates/bevy_ui/src/node_bundles.rs
+++ b/crates/bevy_ui/src/node_bundles.rs
@@ -20,7 +20,8 @@ use bevy_transform::prelude::{GlobalTransform, Transform};
 pub struct NodeBundle {
     /// Describes the logical size of the node
     pub node: Node,
-    /// Describes the style including flexbox settings
+    /// Styles which control the layout (size and position) of the node and it's children
+    /// In some cases these styles also affect how the node drawn/painted.
     pub style: Style,
     /// The background color, which serves as a "fill" for this node
     pub background_color: BackgroundColor,
@@ -65,8 +66,12 @@ impl Default for NodeBundle {
 #[derive(Bundle, Clone, Debug, Default)]
 pub struct ImageBundle {
     /// Describes the logical size of the node
+    ///
+    /// This field is automatically managed by the UI layout system.
+    /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component.
     pub node: Node,
-    /// Describes the style including flexbox settings
+    /// Styles which control the layout (size and position) of the node and it's children
+    /// In some cases these styles also affect how the node drawn/painted.
     pub style: Style,
     /// The calculated size based on the given image
     pub calculated_size: CalculatedSize,
@@ -106,7 +111,8 @@ pub struct ImageBundle {
 pub struct TextBundle {
     /// Describes the logical size of the node
     pub node: Node,
-    /// Describes the style including flexbox settings
+    /// Styles which control the layout (size and position) of the node and it's children
+    /// In some cases these styles also affect how the node drawn/painted.
     pub style: Style,
     /// Contains the text of the node
     pub text: Text,
@@ -186,7 +192,7 @@ impl TextBundle {
     }
 
     /// Returns this [`TextBundle`] with a new [`Style`].
-    pub const fn with_style(mut self, style: Style) -> Self {
+    pub fn with_style(mut self, style: Style) -> Self {
         self.style = style;
         self
     }
@@ -205,7 +211,8 @@ pub struct ButtonBundle {
     pub node: Node,
     /// Marker component that signals this node is a button
     pub button: Button,
-    /// Describes the style including flexbox settings
+    /// Styles which control the layout (size and position) of the node and it's children
+    /// In some cases these styles also affect how the node drawn/painted.
     pub style: Style,
     /// Describes whether and how the button has been interacted with by the input
     pub interaction: Interaction,
diff --git a/crates/bevy_ui/src/ui_node.rs b/crates/bevy_ui/src/ui_node.rs
index a4e2668f00..672eb3c31a 100644
--- a/crates/bevy_ui/src/ui_node.rs
+++ b/crates/bevy_ui/src/ui_node.rs
@@ -9,6 +9,7 @@ use bevy_render::{
 };
 use bevy_transform::prelude::GlobalTransform;
 use serde::{Deserialize, Serialize};
+use smallvec::SmallVec;
 use std::ops::{Div, DivAssign, Mul, MulAssign};
 use thiserror::Error;
 
@@ -17,13 +18,13 @@ use thiserror::Error;
 #[reflect(Component, Default)]
 pub struct Node {
     /// The size of the node as width and height in logical pixels
-    /// automatically calculated by [`super::flex::flex_node_system`]
+    /// automatically calculated by [`super::layout::ui_layout_system`]
     pub(crate) calculated_size: Vec2,
 }
 
 impl Node {
     /// The calculated node size as width and height in logical pixels
-    /// automatically calculated by [`super::flex::flex_node_system`]
+    /// automatically calculated by [`super::layout::ui_layout_system`]
     pub fn size(&self) -> Vec2 {
         self.calculated_size
     }
@@ -260,38 +261,168 @@ impl Val {
     }
 }
 
-/// Describes the style of a UI node
+/// Describes the style of a UI container node
 ///
-/// It uses the [Flexbox](https://cssreference.io/flexbox/) system.
+/// Node's can be laid out using either Flexbox or CSS Grid Layout.<br />
+/// See below for general learning resources and for documentation on the individual style properties.
+///
+/// ### Flexbox
+///
+/// - [MDN: Basic Concepts of Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
+/// - [A Complete Guide To Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) by CSS Tricks. This is detailed guide with illustrations and comphrehensive written explanation of the different Flexbox properties and how they work.
+/// - [Flexbox Froggy](https://flexboxfroggy.com/). An interactive tutorial/game that teaches the essential parts of Flebox in a fun engaging way.
+///
+/// ### CSS Grid
+///
+/// - [MDN: Basic Concepts of Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
+/// - [A Complete Guide To CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) by CSS Tricks. This is detailed guide with illustrations and comphrehensive written explanation of the different CSS Grid properties and how they work.
+/// - [CSS Grid Garden](https://cssgridgarden.com/). An interactive tutorial/game that teaches the essential parts of CSS Grid in a fun engaging way.
+
 #[derive(Component, Clone, PartialEq, Debug, Reflect)]
 #[reflect(Component, Default, PartialEq)]
 pub struct Style {
-    /// Whether to arrange this node and its children with flexbox layout
+    /// Which layout algorithm to use when laying out this node's contents:
+    ///   - [`Display::Flex`]: Use the Flexbox layout algorithm
+    ///   - [`Display::Grid`]: Use the CSS Grid layout algorithm
+    ///   - [`Display::None`]: Hide this node and perform layout as if it does not exist.
     ///
-    /// If this is set to [`Display::None`], this node will be collapsed.
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/display>
     pub display: Display,
-    /// Whether to arrange this node relative to other nodes, or positioned absolutely
+
+    /// Whether a node should be laid out in-flow with, or independently of it's siblings:
+    ///  - [`PositionType::Relative`]: Layout this node in-flow with other nodes using the usual (flexbox/grid) layout algorithm.
+    ///  - [`PositionType::Absolute`]: Layout this node on top and independently of other nodes.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/position>
     pub position_type: PositionType,
-    pub left: Val,
-    pub right: Val,
-    pub top: Val,
-    pub bottom: Val,
-    /// Which direction the content of this node should go
+
+    /// Whether overflowing content should be displayed or clipped.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/overflow>
+    pub overflow: Overflow,
+
+    /// Defines the text direction. For example English is written LTR (left-to-right) while Arabic is written RTL (right-to-left).
+    ///
+    /// Note: the corresponding CSS property also affects box layout order, but this isn't yet implemented in bevy.
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/direction>
     pub direction: Direction,
-    /// Whether to use column or row layout
-    pub flex_direction: FlexDirection,
-    /// How to wrap nodes
-    pub flex_wrap: FlexWrap,
-    /// How items are aligned according to the cross axis
+
+    /// The horizontal position of the left edge of the node.
+    ///  - For relatively positioned nodes, this is relative to the node's position as computed during regular layout.
+    ///  - For absolutely positioned nodes, this is relative to the *parent* node's bounding box.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/left>
+    pub left: Val,
+
+    /// The horizontal position of the right edge of the node.
+    ///  - For relatively positioned nodes, this is relative to the node's position as computed during regular layout.
+    ///  - For absolutely positioned nodes, this is relative to the *parent* node's bounding box.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/right>
+    pub right: Val,
+
+    /// The vertical position of the top edge of the node.
+    ///  - For relatively positioned nodes, this is relative to the node's position as computed during regular layout.
+    ///  - For absolutely positioned nodes, this is relative to the *parent* node's bounding box.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/top>
+    pub top: Val,
+
+    /// The vertical position of the bottom edge of the node.
+    ///  - For relatively positioned nodes, this is relative to the node's position as computed during regular layout.
+    ///  - For absolutely positioned nodes, this is relative to the *parent* node's bounding box.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/bottom>
+    pub bottom: Val,
+
+    /// The ideal size of the node
+    ///
+    /// `size.width` is used when it is within the bounds defined by `min_size.width` and `max_size.width`.
+    /// `size.height` is used when it is within the bounds defined by `min_size.height` and `max_size.height`.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/width> <br />
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/height>
+    pub size: Size,
+
+    /// The minimum size of the node
+    ///
+    /// `min_size.width` is used if it is greater than either `size.width` or `max_size.width`, or both.
+    /// `min_size.height` is used if it is greater than either `size.height` or `max_size.height`, or both.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/min-width> <br />
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/min-height>
+    pub min_size: Size,
+
+    /// The maximum size of the node
+    ///
+    /// `max_size.width` is used if it is within the bounds defined by `min_size.width` and `size.width`.
+    /// `max_size.height` is used if it is within the bounds defined by `min_size.height` and `size.height.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/max-width> <br />
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/max-height>
+    pub max_size: Size,
+
+    /// The aspect ratio of the node (defined as `width / height`)
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio>
+    pub aspect_ratio: Option<f32>,
+
+    /// For Flexbox containers:
+    ///   - Sets default cross-axis alignment of the child items.
+    /// For CSS Grid containers:
+    ///   - Controls block (vertical) axis alignment of children of this grid container within their grid areas
+    ///
+    /// This value is overriden [`JustifySelf`] on the child node is set.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/align-items>
     pub align_items: AlignItems,
-    /// How this item is aligned according to the cross axis.
-    /// Overrides [`AlignItems`].
+
+    /// For Flexbox containers:
+    ///   - This property has no effect. See `justify_content` for main-axis alignment of flex items.
+    /// For CSS Grid containers:
+    ///   - Sets default inline (horizontal) axis alignment of child items within their grid areas
+    ///
+    /// This value is overriden [`JustifySelf`] on the child node is set.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items>
+    pub justify_items: JustifyItems,
+
+    /// For Flexbox items:
+    ///   - Controls cross-axis alignment of the item.
+    /// For CSS Grid items:
+    ///   - Controls block (vertical) axis alignment of a grid item within it's grid area
+    ///
+    /// If set to `Auto`, alignment is inherited from the value of [`AlignItems`] set on the parent node.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/align-self>
     pub align_self: AlignSelf,
-    /// How to align each line, only applies if flex_wrap is set to
-    /// [`FlexWrap::Wrap`] and there are multiple lines of items
+
+    /// For Flexbox items:
+    ///   - This property has no effect. See `justify_content` for main-axis alignment of flex items.
+    /// For CSS Grid items:
+    ///   - Controls inline (horizontal) axis alignment of a grid item within it's grid area.
+    ///
+    /// If set to `Auto`, alignment is inherited from the value of [`JustifyItems`] set on the parent node.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items>
+    pub justify_self: JustifySelf,
+
+    /// For Flexbox containers:
+    ///   - Controls alignment of lines if flex_wrap is set to [`FlexWrap::Wrap`] and there are multiple lines of items
+    /// For CSS Grid container:
+    ///   - Controls alignment of grid rows
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/align-content>
     pub align_content: AlignContent,
-    /// How items align according to the main axis
+
+    /// For Flexbox containers:
+    ///   - Controls alignment of items in the main axis
+    /// For CSS Grid containers:
+    ///   - Controls alignment of grid columns
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content>
     pub justify_content: JustifyContent,
+
     /// The amount of space around a node outside its border.
     ///
     /// If a percentage value is used, the percentage is calculated based on the width of the parent node.
@@ -309,8 +440,11 @@ pub struct Style {
     ///     ..Default::default()
     /// };
     /// ```
-    /// A node with this style and a parent with dimensions of 100px by 300px, will have calculated margins of 10px on both left and right edges, and 15px on both top and bottom egdes.
+    /// A node with this style and a parent with dimensions of 100px by 300px, will have calculated margins of 10px on both left and right edges, and 15px on both top and bottom edges.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/margin>
     pub margin: UiRect,
+
     /// The amount of space between the edges of a node and its contents.
     ///
     /// If a percentage value is used, the percentage is calculated based on the width of the parent node.
@@ -329,7 +463,10 @@ pub struct Style {
     /// };
     /// ```
     /// A node with this style and a parent with dimensions of 300px by 100px, will have calculated padding of 3px on the left, 6px on the right, 9px on the top and 12px on the bottom.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/padding>
     pub padding: UiRect,
+
     /// The amount of space between the margins of a node and its padding.
     ///
     /// If a percentage value is used, the percentage is calculated based on the width of the parent node.
@@ -337,38 +474,82 @@ pub struct Style {
     /// The size of the node will be expanded if there are constraints that prevent the layout algorithm from placing the border within the existing node boundary.
     ///
     /// Rendering for borders is not yet implemented.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/border-width>
     pub border: UiRect,
-    /// Defines how much a flexbox item should grow if there's space available
+
+    /// Whether a Flexbox container should be a row or a column. This property has no effect of Grid nodes.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction>
+    pub flex_direction: FlexDirection,
+
+    /// Whether a Flexbox container should wrap it's contents onto multiple line wrap if they overflow. This property has no effect of Grid nodes.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap>
+    pub flex_wrap: FlexWrap,
+
+    /// Defines how much a flexbox item should grow if there's space available. Defaults to 0 (don't grow at all).
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow>
     pub flex_grow: f32,
-    /// How to shrink if there's not enough space available
+
+    /// Defines how much a flexbox item should shrink if there's not enough space available. Defaults to 1.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink>
     pub flex_shrink: f32,
-    /// The initial length of the main axis, before other properties are applied.
+
+    /// The initial length of a flexbox in the main axis, before flex growing/shrinking properties are applied.
     ///
-    /// If both are set, `flex_basis` overrides `size` on the main axis but it obeys the bounds defined by `min_size` and `max_size`.
+    /// `flex_basis` overrides `size` on the main axis if both are set,  but it obeys the bounds defined by `min_size` and `max_size`.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis>
     pub flex_basis: Val,
-    /// The ideal size of the flexbox
+
+    /// The size of the gutters between items in flexbox layout or rows/columns in a grid layout
     ///
-    /// `size.width` is used when it is within the bounds defined by `min_size.width` and `max_size.width`.
-    /// `size.height` is used when it is within the bounds defined by `min_size.height` and `max_size.height`.
-    pub size: Size,
-    /// The minimum size of the flexbox
+    /// Note: Values of `Val::Auto` are not valid and are treated as zero.
     ///
-    /// `min_size.width` is used if it is greater than either `size.width` or `max_size.width`, or both.
-    /// `min_size.height` is used if it is greater than either `size.height` or `max_size.height`, or both.
-    pub min_size: Size,
-    /// The maximum size of the flexbox
-    ///
-    /// `max_size.width` is used if it is within the bounds defined by `min_size.width` and `size.width`.
-    /// `max_size.height` is used if it is within the bounds defined by `min_size.height` and `size.height.
-    pub max_size: Size,
-    /// The aspect ratio of the flexbox
-    pub aspect_ratio: Option<f32>,
-    /// How to handle overflow
-    pub overflow: Overflow,
-    /// The size of the gutters between the rows and columns of the flexbox layout
-    ///
-    /// A value of `Size::AUTO` is treated as zero.
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/gap>
     pub gap: Size,
+
+    /// Controls whether automatically placed grid items are placed row-wise or column-wise. And whether the sparse or dense packing algorithm is used.
+    /// Only affect Grid layouts
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow>
+    pub grid_auto_flow: GridAutoFlow,
+
+    /// Defines the number of rows a grid has and the sizes of those rows. If grid items are given explicit placements then more rows may
+    /// be implicitly generated by items that are placed out of bounds. The sizes of those rows are controlled by `grid_auto_rows` property.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows>
+    pub grid_template_rows: Vec<RepeatedGridTrack>,
+
+    /// Defines the number of columns a grid has and the sizes of those columns. If grid items are given explicit placements then more columns may
+    /// be implicitly generated by items that are placed out of bounds. The sizes of those columns are controlled by `grid_auto_columns` property.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns>
+    pub grid_template_columns: Vec<RepeatedGridTrack>,
+
+    /// Defines the size of implicitly created rows. Rows are created implicitly when grid items are given explicit placements that are out of bounds
+    /// of the rows explicitly created using `grid_template_rows`.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows>
+    pub grid_auto_rows: Vec<GridTrack>,
+    /// Defines the size of implicitly created columns. Columns are created implicitly when grid items are given explicit placements that are out of bounds
+    /// of the columns explicitly created using `grid_template_columms`.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns>
+    pub grid_auto_columns: Vec<GridTrack>,
+
+    /// The row in which a grid item starts and how many rows it spans.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row>
+    pub grid_row: GridPlacement,
+
+    /// The column in which a grid item starts and how many columns it spans.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column>
+    pub grid_column: GridPlacement,
 }
 
 impl Style {
@@ -383,7 +564,9 @@ impl Style {
         flex_direction: FlexDirection::DEFAULT,
         flex_wrap: FlexWrap::DEFAULT,
         align_items: AlignItems::DEFAULT,
+        justify_items: JustifyItems::DEFAULT,
         align_self: AlignSelf::DEFAULT,
+        justify_self: JustifySelf::DEFAULT,
         align_content: AlignContent::DEFAULT,
         justify_content: JustifyContent::DEFAULT,
         margin: UiRect::DEFAULT,
@@ -397,7 +580,14 @@ impl Style {
         max_size: Size::AUTO,
         aspect_ratio: None,
         overflow: Overflow::DEFAULT,
-        gap: Size::AUTO,
+        gap: Size::all(Val::Px(0.0)),
+        grid_auto_flow: GridAutoFlow::DEFAULT,
+        grid_template_rows: Vec::new(),
+        grid_template_columns: Vec::new(),
+        grid_auto_rows: Vec::new(),
+        grid_auto_columns: Vec::new(),
+        grid_column: GridPlacement::DEFAULT,
+        grid_row: GridPlacement::DEFAULT,
     };
 }
 
@@ -411,6 +601,8 @@ impl Default for Style {
 #[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
 #[reflect(PartialEq, Serialize, Deserialize)]
 pub enum AlignItems {
+    /// The items are packed in their default position as if no alignment was applied
+    Default,
     /// Items are packed towards the start of the axis.
     Start,
     /// Items are packed towards the end of the axis.
@@ -430,7 +622,7 @@ pub enum AlignItems {
 }
 
 impl AlignItems {
-    pub const DEFAULT: Self = Self::Stretch;
+    pub const DEFAULT: Self = Self::Default;
 }
 
 impl Default for AlignItems {
@@ -439,6 +631,34 @@ impl Default for AlignItems {
     }
 }
 
+/// How items are aligned according to the cross axis
+#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
+#[reflect(PartialEq, Serialize, Deserialize)]
+pub enum JustifyItems {
+    /// The items are packed in their default position as if no alignment was applied
+    Default,
+    /// Items are packed towards the start of the axis.
+    Start,
+    /// Items are packed towards the end of the axis.
+    End,
+    /// Items are aligned at the center.
+    Center,
+    /// Items are aligned at the baseline.
+    Baseline,
+    /// Items are stretched across the whole cross axis.
+    Stretch,
+}
+
+impl JustifyItems {
+    pub const DEFAULT: Self = Self::Default;
+}
+
+impl Default for JustifyItems {
+    fn default() -> Self {
+        Self::DEFAULT
+    }
+}
+
 /// How this item is aligned according to the cross axis.
 /// Overrides [`AlignItems`].
 #[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
@@ -474,12 +694,43 @@ impl Default for AlignSelf {
     }
 }
 
+/// How this item is aligned according to the cross axis.
+/// Overrides [`AlignItems`].
+#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
+#[reflect(PartialEq, Serialize, Deserialize)]
+pub enum JustifySelf {
+    /// Use the parent node's [`AlignItems`] value to determine how this item should be aligned.
+    Auto,
+    /// This item will be aligned with the start of the axis.
+    Start,
+    /// This item will be aligned with the end of the axis.
+    End,
+    /// This item will be aligned at the center.
+    Center,
+    /// This item will be aligned at the baseline.
+    Baseline,
+    /// This item will be stretched across the whole cross axis.
+    Stretch,
+}
+
+impl JustifySelf {
+    pub const DEFAULT: Self = Self::Auto;
+}
+
+impl Default for JustifySelf {
+    fn default() -> Self {
+        Self::DEFAULT
+    }
+}
+
 /// Defines how each line is aligned within the flexbox.
 ///
 /// It only applies if [`FlexWrap::Wrap`] is present and if there are multiple lines of items.
 #[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
 #[reflect(PartialEq, Serialize, Deserialize)]
 pub enum AlignContent {
+    /// The items are packed in their default position as if no alignment was applied
+    Default,
     /// Each line moves towards the start of the cross axis.
     Start,
     /// Each line moves towards the end of the cross axis.
@@ -504,7 +755,7 @@ pub enum AlignContent {
 }
 
 impl AlignContent {
-    pub const DEFAULT: Self = Self::Stretch;
+    pub const DEFAULT: Self = Self::Default;
 }
 
 impl Default for AlignContent {
@@ -513,6 +764,40 @@ impl Default for AlignContent {
     }
 }
 
+/// Defines how items are aligned according to the main axis
+#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
+#[reflect(PartialEq, Serialize, Deserialize)]
+pub enum JustifyContent {
+    /// The items are packed in their default position as if no alignment was applied
+    Default,
+    /// Items are packed toward the start of the axis.
+    Start,
+    /// Items are packed toward the end of the axis.
+    End,
+    /// Pushed towards the start, unless the flex direction is reversed; then pushed towards the end.
+    FlexStart,
+    /// Pushed towards the end, unless the flex direction is reversed; then pushed towards the start.
+    FlexEnd,
+    /// Centered along the main axis.
+    Center,
+    /// Remaining space is distributed between the items.
+    SpaceBetween,
+    /// Remaining space is distributed around the items.
+    SpaceAround,
+    /// Like [`JustifyContent::SpaceAround`] but with even spacing between items.
+    SpaceEvenly,
+}
+
+impl JustifyContent {
+    pub const DEFAULT: Self = Self::Default;
+}
+
+impl Default for JustifyContent {
+    fn default() -> Self {
+        Self::DEFAULT
+    }
+}
+
 /// Defines the text direction
 ///
 /// For example English is written LTR (left-to-right) while Arabic is written RTL (right-to-left).
@@ -545,6 +830,8 @@ impl Default for Direction {
 pub enum Display {
     /// Use Flexbox layout model to determine the position of this [`Node`].
     Flex,
+    /// Use CSS Grid layout model to determine the position of this [`Node`].
+    Grid,
     /// Use no layout, don't render this node and its children.
     ///
     /// If you want to hide a node and its children,
@@ -586,38 +873,6 @@ impl Default for FlexDirection {
     }
 }
 
-/// Defines how items are aligned according to the main axis
-#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
-#[reflect(PartialEq, Serialize, Deserialize)]
-pub enum JustifyContent {
-    /// Items are packed toward the start of the axis.
-    Start,
-    /// Items are packed toward the end of the axis.
-    End,
-    /// Pushed towards the start, unless the flex direction is reversed; then pushed towards the end.
-    FlexStart,
-    /// Pushed towards the end, unless the flex direction is reversed; then pushed towards the start.
-    FlexEnd,
-    /// Centered along the main axis.
-    Center,
-    /// Remaining space is distributed between the items.
-    SpaceBetween,
-    /// Remaining space is distributed around the items.
-    SpaceAround,
-    /// Like [`JustifyContent::SpaceAround`] but with even spacing between items.
-    SpaceEvenly,
-}
-
-impl JustifyContent {
-    pub const DEFAULT: Self = Self::FlexStart;
-}
-
-impl Default for JustifyContent {
-    fn default() -> Self {
-        Self::DEFAULT
-    }
-}
-
 /// Whether to show or hide overflowing items
 #[derive(Copy, Clone, PartialEq, Eq, Debug, Reflect, Serialize, Deserialize)]
 #[reflect(PartialEq, Serialize, Deserialize)]
@@ -682,6 +937,513 @@ impl Default for FlexWrap {
     }
 }
 
+/// Controls whether grid items are placed row-wise or column-wise. And whether the sparse or dense packing algorithm is used.
+///
+/// The "dense" packing algorithm attempts to fill in holes earlier in the grid, if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.
+///
+/// Defaults to [`GridAutoFlow::Row`]
+///
+/// <https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow>
+#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
+#[reflect(PartialEq, Serialize, Deserialize)]
+pub enum GridAutoFlow {
+    /// Items are placed by filling each row in turn, adding new rows as necessary
+    Row,
+    /// Items are placed by filling each column in turn, adding new columns as necessary.
+    Column,
+    /// Combines `Row` with the dense packing algorithm.
+    RowDense,
+    /// Combines `Column` with the dense packing algorithm.
+    ColumnDense,
+}
+
+impl GridAutoFlow {
+    const DEFAULT: Self = Self::Row;
+}
+
+impl Default for GridAutoFlow {
+    fn default() -> Self {
+        Self::DEFAULT
+    }
+}
+
+#[derive(Copy, Clone, PartialEq, Debug, Serialize, Deserialize, Reflect, FromReflect)]
+#[reflect_value(PartialEq, Serialize, Deserialize)]
+pub enum MinTrackSizingFunction {
+    /// Track minimum size should be a fixed pixel value
+    Px(f32),
+    /// Track minimum size should be a percentage value
+    Percent(f32),
+    /// Track minimum size should be content sized under a min-content constraint
+    MinContent,
+    /// Track minimum size should be content sized under a max-content constraint
+    MaxContent,
+    /// Track minimum size should be automatically sized
+    Auto,
+}
+
+#[derive(Copy, Clone, PartialEq, Debug, Serialize, Deserialize, Reflect, FromReflect)]
+#[reflect_value(PartialEq, Serialize, Deserialize)]
+pub enum MaxTrackSizingFunction {
+    /// Track maximum size should be a fixed pixel value
+    Px(f32),
+    /// Track maximum size should be a percentage value
+    Percent(f32),
+    /// Track maximum size should be content sized under a min-content constraint
+    MinContent,
+    /// Track maximum size should be content sized under a max-content constraint
+    MaxContent,
+    /// Track maximum size should be sized according to the fit-content formula with a fixed pixel limit
+    FitContentPx(f32),
+    /// Track maximum size should be sized according to the fit-content formula with a percentage limit
+    FitContentPercent(f32),
+    /// Track maximum size should be automatically sized
+    Auto,
+    /// The dimension as a fraction of the total available grid space (`fr` units in CSS)
+    /// Specified value is the numerator of the fraction. Denominator is the sum of all fractions specified in that grid dimension
+    /// Spec: <https://www.w3.org/TR/css3-grid-layout/#fr-unit>
+    Fraction(f32),
+}
+
+/// A [`GridTrack`] is a Row or Column of a CSS Grid. This struct specifies what size the track should be.
+/// See below for the different "track sizing functions" you can specify.
+#[derive(Copy, Clone, PartialEq, Debug, Serialize, Deserialize, Reflect, FromReflect)]
+#[reflect(PartialEq, Serialize, Deserialize)]
+pub struct GridTrack {
+    pub(crate) min_sizing_function: MinTrackSizingFunction,
+    pub(crate) max_sizing_function: MaxTrackSizingFunction,
+}
+
+impl GridTrack {
+    const DEFAULT: Self = Self {
+        min_sizing_function: MinTrackSizingFunction::Auto,
+        max_sizing_function: MaxTrackSizingFunction::Auto,
+    };
+
+    /// Create a grid track with a fixed pixel size
+    pub fn px<T: From<Self>>(value: f32) -> T {
+        Self {
+            min_sizing_function: MinTrackSizingFunction::Px(value),
+            max_sizing_function: MaxTrackSizingFunction::Px(value),
+        }
+        .into()
+    }
+
+    /// Create a grid track with a percentage size
+    pub fn percent<T: From<Self>>(value: f32) -> T {
+        Self {
+            min_sizing_function: MinTrackSizingFunction::Percent(value),
+            max_sizing_function: MaxTrackSizingFunction::Percent(value),
+        }
+        .into()
+    }
+
+    /// Create a grid track with an `fr` size.
+    /// Note that this will give the track a content-based minimum size.
+    /// Usually you are best off using `GridTrack::flex` instead which uses a zero minimum size
+    pub fn fr<T: From<Self>>(value: f32) -> T {
+        Self {
+            min_sizing_function: MinTrackSizingFunction::Auto,
+            max_sizing_function: MaxTrackSizingFunction::Fraction(value),
+        }
+        .into()
+    }
+
+    /// Create a grid track with an `minmax(0, Nfr)` size.
+    pub fn flex<T: From<Self>>(value: f32) -> T {
+        Self {
+            min_sizing_function: MinTrackSizingFunction::Px(0.0),
+            max_sizing_function: MaxTrackSizingFunction::Fraction(value),
+        }
+        .into()
+    }
+
+    /// Create a grid track which is automatically sized to fit it's contents, and then
+    pub fn auto<T: From<Self>>() -> T {
+        Self {
+            min_sizing_function: MinTrackSizingFunction::Auto,
+            max_sizing_function: MaxTrackSizingFunction::Auto,
+        }
+        .into()
+    }
+
+    /// Create a grid track which is automatically sized to fit it's contents when sized at their "min-content" sizes
+    pub fn min_content<T: From<Self>>() -> T {
+        Self {
+            min_sizing_function: MinTrackSizingFunction::MinContent,
+            max_sizing_function: MaxTrackSizingFunction::MinContent,
+        }
+        .into()
+    }
+
+    /// Create a grid track which is automatically sized to fit it's contents when sized at their "max-content" sizes
+    pub fn max_content<T: From<Self>>() -> T {
+        Self {
+            min_sizing_function: MinTrackSizingFunction::MaxContent,
+            max_sizing_function: MaxTrackSizingFunction::MaxContent,
+        }
+        .into()
+    }
+
+    /// Create a fit-content() grid track with fixed pixel limit
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content_function>
+    pub fn fit_content_px<T: From<Self>>(limit: f32) -> T {
+        Self {
+            min_sizing_function: MinTrackSizingFunction::Auto,
+            max_sizing_function: MaxTrackSizingFunction::FitContentPx(limit),
+        }
+        .into()
+    }
+
+    /// Create a fit-content() grid track with percentage limit
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content_function>
+    pub fn fit_content_percent<T: From<Self>>(limit: f32) -> T {
+        Self {
+            min_sizing_function: MinTrackSizingFunction::Auto,
+            max_sizing_function: MaxTrackSizingFunction::FitContentPercent(limit),
+        }
+        .into()
+    }
+
+    /// Create a minmax() grid track
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/minmax>
+    pub fn minmax<T: From<Self>>(min: MinTrackSizingFunction, max: MaxTrackSizingFunction) -> T {
+        Self {
+            min_sizing_function: min,
+            max_sizing_function: max,
+        }
+        .into()
+    }
+}
+
+impl Default for GridTrack {
+    fn default() -> Self {
+        Self::DEFAULT
+    }
+}
+
+#[derive(Copy, Clone, PartialEq, Debug, Serialize, Deserialize, Reflect, FromReflect)]
+#[reflect(PartialEq, Serialize, Deserialize)]
+/// How many times to repeat a repeated grid track
+///
+/// <https://developer.mozilla.org/en-US/docs/Web/CSS/repeat>
+pub enum GridTrackRepetition {
+    /// Repeat the track fixed number of times
+    Count(u16),
+    /// Repeat the track to fill available space
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/repeat#auto-fill>
+    AutoFill,
+    /// Repeat the track to fill available space but collapse any tracks that do not end up with
+    /// an item placed in them.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/repeat#auto-fit>
+    AutoFit,
+}
+
+impl From<u16> for GridTrackRepetition {
+    fn from(count: u16) -> Self {
+        Self::Count(count)
+    }
+}
+
+impl From<i32> for GridTrackRepetition {
+    fn from(count: i32) -> Self {
+        Self::Count(count as u16)
+    }
+}
+
+impl From<usize> for GridTrackRepetition {
+    fn from(count: usize) -> Self {
+        Self::Count(count as u16)
+    }
+}
+
+/// Represents a *possibly* repeated [`GridTrack`].
+///
+/// The repetition parameter can either be:
+///   - The integer `1`, in which case the track is non-repeated.
+///   - a `u16` count to repeat the track N times
+///   - A `GridTrackRepetition::AutoFit` or `GridTrackRepetition::AutoFill`
+///
+/// Note: that in the common case you want a non-repeating track (repetition count 1), you may use the constructor methods on [`GridTrack`]
+/// to create a `RepeatedGridTrack`. i.e. `GridTrack::px(10.0)` is equivalent to `RepeatedGridTrack::px(1, 10.0)`.
+///
+/// You may only use one auto-repetition per track list. And if your track list contains an auto repetition
+/// then all track (in and outside of the repetition) must be fixed size (px or percent). Integer repetitions are just shorthand for writing out
+/// N tracks longhand and are not subject to the same limitations.
+#[derive(Clone, PartialEq, Debug, Serialize, Deserialize, Reflect, FromReflect)]
+#[reflect(PartialEq, Serialize, Deserialize)]
+pub struct RepeatedGridTrack {
+    pub(crate) repetition: GridTrackRepetition,
+    pub(crate) tracks: SmallVec<[GridTrack; 1]>,
+}
+
+impl RepeatedGridTrack {
+    /// Create a repeating set of grid tracks with a fixed pixel size
+    pub fn px<T: From<Self>>(repetition: impl Into<GridTrackRepetition>, value: f32) -> T {
+        Self {
+            repetition: repetition.into(),
+            tracks: SmallVec::from_buf([GridTrack::px(value)]),
+        }
+        .into()
+    }
+
+    /// Create a repeating set of grid tracks with a percentage size
+    pub fn percent<T: From<Self>>(repetition: impl Into<GridTrackRepetition>, value: f32) -> T {
+        Self {
+            repetition: repetition.into(),
+            tracks: SmallVec::from_buf([GridTrack::percent(value)]),
+        }
+        .into()
+    }
+
+    /// Create a repeating set of grid tracks with automatic size
+    pub fn auto<T: From<Self>>(repetition: u16) -> T {
+        Self {
+            repetition: GridTrackRepetition::Count(repetition),
+            tracks: SmallVec::from_buf([GridTrack::auto()]),
+        }
+        .into()
+    }
+
+    /// Create a repeating set of grid tracks with an `fr` size.
+    /// Note that this will give the track a content-based minimum size.
+    /// Usually you are best off using `GridTrack::flex` instead which uses a zero minimum size
+    pub fn fr<T: From<Self>>(repetition: u16, value: f32) -> T {
+        Self {
+            repetition: GridTrackRepetition::Count(repetition),
+            tracks: SmallVec::from_buf([GridTrack::fr(value)]),
+        }
+        .into()
+    }
+
+    /// Create a repeating set of grid tracks with an `minmax(0, Nfr)` size.
+    pub fn flex<T: From<Self>>(repetition: u16, value: f32) -> T {
+        Self {
+            repetition: GridTrackRepetition::Count(repetition),
+            tracks: SmallVec::from_buf([GridTrack::flex(value)]),
+        }
+        .into()
+    }
+
+    /// Create a repeating set of grid tracks with min-content size
+    pub fn min_content<T: From<Self>>(repetition: u16) -> T {
+        Self {
+            repetition: GridTrackRepetition::Count(repetition),
+            tracks: SmallVec::from_buf([GridTrack::min_content()]),
+        }
+        .into()
+    }
+
+    /// Create a repeating set of grid tracks with max-content size
+    pub fn max_content<T: From<Self>>(repetition: u16) -> T {
+        Self {
+            repetition: GridTrackRepetition::Count(repetition),
+            tracks: SmallVec::from_buf([GridTrack::max_content()]),
+        }
+        .into()
+    }
+
+    /// Create a repeating set of fit-content() grid tracks with fixed pixel limit
+    pub fn fit_content_px<T: From<Self>>(repetition: u16, limit: f32) -> T {
+        Self {
+            repetition: GridTrackRepetition::Count(repetition),
+            tracks: SmallVec::from_buf([GridTrack::fit_content_px(limit)]),
+        }
+        .into()
+    }
+
+    /// Create a repeating set of fit-content() grid tracks with percentage limit
+    pub fn fit_content_percent<T: From<Self>>(repetition: u16, limit: f32) -> T {
+        Self {
+            repetition: GridTrackRepetition::Count(repetition),
+            tracks: SmallVec::from_buf([GridTrack::fit_content_percent(limit)]),
+        }
+        .into()
+    }
+
+    /// Create a repeating set of minmax() grid track
+    pub fn minmax<T: From<Self>>(
+        repetition: impl Into<GridTrackRepetition>,
+        min: MinTrackSizingFunction,
+        max: MaxTrackSizingFunction,
+    ) -> T {
+        Self {
+            repetition: repetition.into(),
+            tracks: SmallVec::from_buf([GridTrack::minmax(min, max)]),
+        }
+        .into()
+    }
+
+    /// Create a repetition of a set of tracks
+    pub fn repeat_many<T: From<Self>>(
+        repetition: impl Into<GridTrackRepetition>,
+        tracks: impl Into<Vec<GridTrack>>,
+    ) -> T {
+        Self {
+            repetition: repetition.into(),
+            tracks: SmallVec::from_vec(tracks.into()),
+        }
+        .into()
+    }
+}
+
+impl From<GridTrack> for RepeatedGridTrack {
+    fn from(track: GridTrack) -> Self {
+        Self {
+            repetition: GridTrackRepetition::Count(1),
+            tracks: SmallVec::from_buf([track]),
+        }
+    }
+}
+
+impl From<GridTrack> for Vec<GridTrack> {
+    fn from(track: GridTrack) -> Self {
+        vec![GridTrack {
+            min_sizing_function: track.min_sizing_function,
+            max_sizing_function: track.max_sizing_function,
+        }]
+    }
+}
+
+impl From<GridTrack> for Vec<RepeatedGridTrack> {
+    fn from(track: GridTrack) -> Self {
+        vec![RepeatedGridTrack {
+            repetition: GridTrackRepetition::Count(1),
+            tracks: SmallVec::from_buf([track]),
+        }]
+    }
+}
+
+impl From<RepeatedGridTrack> for Vec<RepeatedGridTrack> {
+    fn from(track: RepeatedGridTrack) -> Self {
+        vec![track]
+    }
+}
+
+#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
+#[reflect(PartialEq, Serialize, Deserialize)]
+/// Represents the position of a grid item in a single axis.
+///
+/// There are 3 fields which may be set:
+///   - `start`: which grid line the item should start at
+///   - `end`: which grid line the item should end at
+///   - `span`: how many tracks the item should span
+///
+/// The default `span` is 1. If neither `start` or `end` is set then the item will be placed automatically.
+///
+/// Generally, at most two fields should be set. If all three fields are specifed then `span` will be ignored. If `end` specifies an earlier
+/// grid line than `start` then `end` will be ignored and the item will have a span of 1.
+///
+/// <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid>
+pub struct GridPlacement {
+    /// The grid line at which the item should start. Lines are 1-indexed. Negative indexes count backwards from the end of the grid. Zero is not a valid index.
+    pub(crate) start: Option<i16>,
+    /// How many grid tracks the item should span. Defaults to 1.
+    pub(crate) span: Option<u16>,
+    /// The grid line at which the node should end. Lines are 1-indexed. Negative indexes count backwards from the end of the grid. Zero is not a valid index.
+    pub(crate) end: Option<i16>,
+}
+
+impl GridPlacement {
+    const DEFAULT: Self = Self {
+        start: None,
+        span: Some(1),
+        end: None,
+    };
+
+    /// Place the grid item automatically (letting the `span` default to `1`).
+    pub fn auto() -> Self {
+        Self {
+            start: None,
+            end: None,
+            span: Some(1),
+        }
+    }
+
+    /// Place the grid item automatically, specifying how many tracks it should `span`.
+    pub fn span(span: u16) -> Self {
+        Self {
+            start: None,
+            end: None,
+            span: Some(span),
+        }
+    }
+
+    /// Place the grid item specifying the `start` grid line (letting the `span` default to `1`).
+    pub fn start(start: i16) -> Self {
+        Self {
+            start: Some(start),
+            end: None,
+            span: Some(1),
+        }
+    }
+
+    /// Place the grid item specifying the `end` grid line (letting the `span` default to `1`).
+    pub fn end(end: i16) -> Self {
+        Self {
+            start: None,
+            end: Some(end),
+            span: Some(1),
+        }
+    }
+
+    /// Place the grid item specifying the `start` grid line and how many tracks it should `span`.
+    pub fn start_span(start: i16, span: u16) -> Self {
+        Self {
+            start: Some(start),
+            end: None,
+            span: Some(span),
+        }
+    }
+
+    /// Place the grid item specifying `start` and `end` grid lines (`span` will be inferred)
+    pub fn start_end(start: i16, end: i16) -> Self {
+        Self {
+            start: Some(start),
+            end: Some(end),
+            span: None,
+        }
+    }
+
+    /// Place the grid item specifying the `end` grid line and how many tracks it should `span`.
+    pub fn end_span(end: i16, span: u16) -> Self {
+        Self {
+            start: None,
+            end: Some(end),
+            span: Some(span),
+        }
+    }
+
+    /// Mutate the item, setting the `start` grid line
+    pub fn set_start(mut self, start: i16) -> Self {
+        self.start = Some(start);
+        self
+    }
+
+    /// Mutate the item, setting the `end` grid line
+    pub fn set_end(mut self, end: i16) -> Self {
+        self.end = Some(end);
+        self
+    }
+
+    /// Mutate the item, setting the number of tracks the item should `span`
+    pub fn set_span(mut self, span: u16) -> Self {
+        self.span = Some(span);
+        self
+    }
+}
+
+impl Default for GridPlacement {
+    fn default() -> Self {
+        Self::DEFAULT
+    }
+}
+
 /// The background color of the node
 ///
 /// This serves as the "fill" color.
diff --git a/examples/README.md b/examples/README.md
index c5d1516418..5f83b7f1a5 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -331,6 +331,7 @@ Example | Description
 Example | Description
 --- | ---
 [Button](../examples/ui/button.rs) | Illustrates creating and updating a button
+[CSS Grid](../examples/ui/grid.rs) | An example for CSS Grid layout
 [Flex Layout](../examples/ui/flex_layout.rs) | Demonstrates how the AlignItems and JustifyContent properties can be composed to layout nodes and position text
 [Font Atlas Debug](../examples/ui/font_atlas_debug.rs) | Illustrates how FontAtlases are populated (used to optimize text rendering internally)
 [Overflow and Clipping Debug](../examples/ui/overflow_debug.rs) | An example to debug overflow and clipping behavior
diff --git a/examples/ui/grid.rs b/examples/ui/grid.rs
new file mode 100644
index 0000000000..7a2a5503fb
--- /dev/null
+++ b/examples/ui/grid.rs
@@ -0,0 +1,218 @@
+//! Demonstrates how CSS Grid layout can be used to lay items out in a 2D grid
+use bevy::prelude::*;
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins.set(WindowPlugin {
+            primary_window: Some(Window {
+                resolution: [800., 600.].into(),
+                title: "Bevy CSS Grid Layout Example".to_string(),
+                ..default()
+            }),
+            ..default()
+        }))
+        .add_systems(Startup, spawn_layout)
+        .run();
+}
+
+fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
+    let font = asset_server.load("fonts/FiraSans-Bold.ttf");
+    commands.spawn(Camera2dBundle::default());
+
+    // Top-level grid (app frame)
+    commands
+        .spawn(NodeBundle {
+            style: Style {
+                /// Use the CSS Grid algorithm for laying out this node
+                display: Display::Grid,
+                /// Make node fill the entirety it's parent (in this case the window)
+                size: Size::all(Val::Percent(100.)),
+                /// Set the grid to have 2 columns with sizes [min-content, minmax(0, 1fr)]
+                ///   - The first column will size to the size of it's contents
+                ///   - The second column will take up the remaining available space
+                grid_template_columns: vec![GridTrack::min_content(), GridTrack::flex(1.0)],
+                /// Set the grid to have 3 rows with sizes [auto, minmax(0, 1fr), 20px]
+                ///  - The first row will size to the size of it's contents
+                ///  - The second row take up remaining available space (after rows 1 and 3 have both been sized)
+                ///  - The third row will be exactly 20px high
+                grid_template_rows: vec![
+                    GridTrack::auto(),
+                    GridTrack::flex(1.0),
+                    GridTrack::px(20.),
+                ],
+                ..default()
+            },
+            background_color: BackgroundColor(Color::WHITE),
+            ..default()
+        })
+        .with_children(|builder| {
+            // Header
+            builder
+                .spawn(NodeBundle {
+                    style: Style {
+                        display: Display::Grid,
+                        /// Make this node span two grid columns so that it takes up the entire top tow
+                        grid_column: GridPlacement::span(2),
+                        padding: UiRect::all(Val::Px(6.0)),
+                        ..default()
+                    },
+                    ..default()
+                })
+                .with_children(|builder| {
+                    spawn_nested_text_bundle(builder, font.clone(), "Bevy CSS Grid Layout Example");
+                });
+
+            // Main content grid (auto placed in row 2, column 1)
+            builder
+                .spawn(NodeBundle {
+                    style: Style {
+                        /// Make the height of the node fill its parent
+                        size: Size::height(Val::Percent(100.0)),
+                        /// Make the grid have a 1:1 aspect ratio meaning it will scale as an exact square
+                        /// As the height is set explicitly, this means the width will adjust to match the height
+                        aspect_ratio: Some(1.0),
+                        /// Use grid layout for this node
+                        display: Display::Grid,
+                        // Add 24px of padding around the grid
+                        padding: UiRect::all(Val::Px(24.0)),
+                        /// Set the grid to have 4 columns all with sizes minmax(0, 1fr)
+                        /// This creates 4 exactly evenly sized columns
+                        grid_template_columns: RepeatedGridTrack::flex(4, 1.0),
+                        /// Set the grid to have 4 rows all with sizes minmax(0, 1fr)
+                        /// This creates 4 exactly evenly sized rows
+                        grid_template_rows: RepeatedGridTrack::flex(4, 1.0),
+                        /// Set a 12px gap/gutter between rows and columns
+                        gap: Size::all(Val::Px(12.0)),
+                        ..default()
+                    },
+                    background_color: BackgroundColor(Color::DARK_GRAY),
+                    ..default()
+                })
+                .with_children(|builder| {
+                    // Note there is no need to specify the position for each grid item. Grid items that are
+                    // not given an explicit position will be automatically positioned into the next available
+                    // grid cell. The order in which this is performed can be controlled using the grid_auto_flow
+                    // style property.
+
+                    item_rect(builder, Color::ORANGE);
+                    item_rect(builder, Color::BISQUE);
+                    item_rect(builder, Color::BLUE);
+                    item_rect(builder, Color::CRIMSON);
+
+                    item_rect(builder, Color::CYAN);
+                    item_rect(builder, Color::ORANGE_RED);
+                    item_rect(builder, Color::DARK_GREEN);
+                    item_rect(builder, Color::FUCHSIA);
+
+                    item_rect(builder, Color::TEAL);
+                    item_rect(builder, Color::ALICE_BLUE);
+                    item_rect(builder, Color::CRIMSON);
+                    item_rect(builder, Color::ANTIQUE_WHITE);
+
+                    item_rect(builder, Color::YELLOW);
+                    item_rect(builder, Color::PINK);
+                    item_rect(builder, Color::YELLOW_GREEN);
+                    item_rect(builder, Color::SALMON);
+                });
+
+            // Right side bar (auto placed in row 2, column 2)
+            builder
+                .spawn(NodeBundle {
+                    style: Style {
+                        display: Display::Grid,
+                        // Align content towards the start (top) in the vertical axis
+                        align_items: AlignItems::Start,
+                        // Align content towards the center in the horizontal axis
+                        justify_items: JustifyItems::Center,
+                        // Add 20px padding to the top
+                        padding: UiRect::top(Val::Px(20.)),
+                        ..default()
+                    },
+                    background_color: BackgroundColor(Color::BLACK),
+                    ..default()
+                })
+                .with_children(|builder| {
+                    builder.spawn(TextBundle::from_section(
+                        "Sidebar",
+                        TextStyle {
+                            font,
+                            font_size: 24.0,
+                            color: Color::WHITE,
+                        },
+                    ));
+                });
+
+            // Footer / status bar
+            builder.spawn(NodeBundle {
+                style: Style {
+                    // Make this node span two grid column so that it takes up the entire bottom row
+                    grid_column: GridPlacement::span(2),
+                    ..default()
+                },
+                background_color: BackgroundColor(Color::WHITE),
+                ..default()
+            });
+
+            // Modal (absolutely positioned on top of content - uncomment to view)
+            // builder.spawn(NodeBundle {
+            //     style: Style {
+            //         position_type: PositionType::Absolute,
+            //         margin: UiRect {
+            //             top: Val::Px(100.),
+            //             bottom: Val::Auto,
+            //             left: Val::Auto,
+            //             right: Val::Auto,
+            //         },
+            //         size: Size {
+            //             width: Val::Percent(60.),
+            //             height: Val::Px(300.),
+            //         },
+            //         max_size: Size {
+            //             width: Val::Px(600.),
+            //             height: Val::Auto,
+            //         },
+            //         ..default()
+            //     },
+            //     background_color: BackgroundColor(Color::Rgba {
+            //         red: 255.0,
+            //         green: 255.0,
+            //         blue: 255.0,
+            //         alpha: 0.8,
+            //     }),
+            //     ..default()
+            // });
+        });
+}
+
+/// Create a coloured rectangle node. The node has size as it is assumed that it will be
+/// spawned as a child of a Grid container with `AlignItems::Stretch` and `JustifyItems::Stretch`
+/// which will allow it to take it's size from the size of the grid area it occupies.
+fn item_rect(builder: &mut ChildBuilder, color: Color) {
+    builder
+        .spawn(NodeBundle {
+            style: Style {
+                display: Display::Grid,
+                padding: UiRect::all(Val::Px(3.0)),
+                ..default()
+            },
+            background_color: BackgroundColor(Color::BLACK),
+            ..default()
+        })
+        .with_children(|builder| {
+            builder.spawn(NodeBundle {
+                background_color: BackgroundColor(color),
+                ..default()
+            });
+        });
+}
+
+fn spawn_nested_text_bundle(builder: &mut ChildBuilder, font: Handle<Font>, text: &str) {
+    builder.spawn(TextBundle::from_section(
+        text,
+        TextStyle {
+            font,
+            font_size: 24.0,
+            color: Color::BLACK,
+        },
+    ));
+}