diff --git a/crates/bevy_ui/src/geometry.rs b/crates/bevy_ui/src/geometry.rs
index 363c8acf698a5..796be56f01f48 100644
--- a/crates/bevy_ui/src/geometry.rs
+++ b/crates/bevy_ui/src/geometry.rs
@@ -1,6 +1,5 @@
 use crate::Val;
 use bevy_reflect::{FromReflect, Reflect, ReflectFromReflect};
-use std::ops::{Div, DivAssign, Mul, MulAssign};
 
 /// A type which is commonly used to define margins, paddings and borders.
 ///
@@ -282,152 +281,6 @@ impl Default for UiRect {
     }
 }
 
-/// A 2-dimensional area defined by a width and height.
-///
-/// It is commonly used to define the size of a text or UI element.
-#[derive(Copy, Clone, PartialEq, Debug, Reflect, FromReflect)]
-#[reflect(FromReflect, PartialEq)]
-pub struct Size {
-    /// The width of the 2-dimensional area.
-    pub width: Val,
-    /// The height of the 2-dimensional area.
-    pub height: Val,
-}
-
-impl Size {
-    pub const DEFAULT: Self = Self::AUTO;
-
-    /// Creates a new [`Size`] from a width and a height.
-    ///
-    /// # Example
-    ///
-    /// ```
-    /// # use bevy_ui::{Size, Val};
-    /// #
-    /// let size = Size::new(Val::Px(100.0), Val::Px(200.0));
-    ///
-    /// assert_eq!(size.width, Val::Px(100.0));
-    /// assert_eq!(size.height, Val::Px(200.0));
-    /// ```
-    pub const fn new(width: Val, height: Val) -> Self {
-        Size { width, height }
-    }
-
-    /// Creates a new [`Size`] where both sides take the given value.
-    ///
-    /// # Example
-    ///
-    /// ```
-    /// # use bevy_ui::{Size, Val};
-    /// #
-    /// let size = Size::all(Val::Px(10.));
-    ///
-    /// assert_eq!(size.width, Val::Px(10.0));
-    /// assert_eq!(size.height, Val::Px(10.0));
-    /// ```
-    pub const fn all(value: Val) -> Self {
-        Self {
-            width: value,
-            height: value,
-        }
-    }
-
-    /// Creates a new [`Size`] where `width` takes the given value,
-    /// and `height` is set to [`Val::Auto`].
-
-    ///
-    /// # Example
-    ///
-    /// ```
-    /// # use bevy_ui::{Size, Val};
-    /// #
-    /// let size = Size::width(Val::Px(10.));
-    ///
-    /// assert_eq!(size.width, Val::Px(10.0));
-    /// assert_eq!(size.height, Val::Auto);
-    /// ```
-    pub const fn width(width: Val) -> Self {
-        Self {
-            width,
-            height: Val::Auto,
-        }
-    }
-
-    /// Creates a new [`Size`] where `height` takes the given value,
-    /// and `width` is set to [`Val::Auto`].
-    ///
-    /// # Example
-    ///
-    /// ```
-    /// # use bevy_ui::{Size, Val};
-    /// #
-    /// let size = Size::height(Val::Px(10.));
-    ///
-    /// assert_eq!(size.width, Val::Auto);
-    /// assert_eq!(size.height, Val::Px(10.));
-    /// ```
-    pub const fn height(height: Val) -> Self {
-        Self {
-            width: Val::Auto,
-            height,
-        }
-    }
-
-    /// Creates a Size where both values are [`Val::Auto`].
-    pub const AUTO: Self = Self::all(Val::Auto);
-}
-
-impl Default for Size {
-    fn default() -> Self {
-        Self::DEFAULT
-    }
-}
-
-impl From<(Val, Val)> for Size {
-    fn from(vals: (Val, Val)) -> Self {
-        Self {
-            width: vals.0,
-            height: vals.1,
-        }
-    }
-}
-
-impl Mul<f32> for Size {
-    type Output = Size;
-
-    fn mul(self, rhs: f32) -> Self::Output {
-        Self::Output {
-            width: self.width * rhs,
-            height: self.height * rhs,
-        }
-    }
-}
-
-impl MulAssign<f32> for Size {
-    fn mul_assign(&mut self, rhs: f32) {
-        self.width *= rhs;
-        self.height *= rhs;
-    }
-}
-
-impl Div<f32> for Size {
-    type Output = Size;
-
-    fn div(self, rhs: f32) -> Self::Output {
-        Self::Output {
-            width: self.width / rhs,
-            height: self.height / rhs,
-        }
-    }
-}
-
-impl DivAssign<f32> for Size {
-    fn div_assign(&mut self, rhs: f32) {
-        self.width /= rhs;
-        self.height /= rhs;
-    }
-}
-
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -446,91 +299,6 @@ mod tests {
         assert_eq!(UiRect::default(), UiRect::DEFAULT);
     }
 
-    #[test]
-    fn test_size_from() {
-        let size: Size = (Val::Px(20.), Val::Px(30.)).into();
-
-        assert_eq!(
-            size,
-            Size {
-                width: Val::Px(20.),
-                height: Val::Px(30.),
-            }
-        );
-    }
-
-    #[test]
-    fn test_size_mul() {
-        assert_eq!(Size::all(Val::Px(10.)) * 2., Size::all(Val::Px(20.)));
-
-        let mut size = Size::all(Val::Px(10.));
-        size *= 2.;
-        assert_eq!(size, Size::all(Val::Px(20.)));
-    }
-
-    #[test]
-    fn test_size_div() {
-        assert_eq!(
-            Size::new(Val::Px(20.), Val::Px(20.)) / 2.,
-            Size::new(Val::Px(10.), Val::Px(10.))
-        );
-
-        let mut size = Size::new(Val::Px(20.), Val::Px(20.));
-        size /= 2.;
-        assert_eq!(size, Size::new(Val::Px(10.), Val::Px(10.)));
-    }
-
-    #[test]
-    fn test_size_all() {
-        let length = Val::Px(10.);
-
-        assert_eq!(
-            Size::all(length),
-            Size {
-                width: length,
-                height: length
-            }
-        );
-    }
-
-    #[test]
-    fn test_size_width() {
-        let width = Val::Px(10.);
-
-        assert_eq!(
-            Size::width(width),
-            Size {
-                width,
-                ..Default::default()
-            }
-        );
-    }
-
-    #[test]
-    fn test_size_height() {
-        let height = Val::Px(7.);
-
-        assert_eq!(
-            Size::height(height),
-            Size {
-                height,
-                ..Default::default()
-            }
-        );
-    }
-
-    #[test]
-    fn size_default_equals_const_default() {
-        assert_eq!(
-            Size::default(),
-            Size {
-                width: Val::Auto,
-                height: Val::Auto
-            }
-        );
-        assert_eq!(Size::default(), Size::DEFAULT);
-    }
-
     #[test]
     fn test_uirect_axes() {
         let x = Val::Px(1.);
diff --git a/crates/bevy_ui/src/layout/convert.rs b/crates/bevy_ui/src/layout/convert.rs
index 41b2fbcffb732..d3fe37679849d 100644
--- a/crates/bevy_ui/src/layout/convert.rs
+++ b/crates/bevy_ui/src/layout/convert.rs
@@ -3,8 +3,8 @@ use taffy::style_helpers;
 use crate::{
     AlignContent, AlignItems, AlignSelf, Display, FlexDirection, FlexWrap, GridAutoFlow,
     GridPlacement, GridTrack, GridTrackRepetition, JustifyContent, JustifyItems, JustifySelf,
-    MaxTrackSizingFunction, MinTrackSizingFunction, PositionType, RepeatedGridTrack, Size, Style,
-    UiRect, Val,
+    MaxTrackSizingFunction, MinTrackSizingFunction, PositionType, RepeatedGridTrack, Style, UiRect,
+    Val,
 };
 
 use super::LayoutContext;
@@ -63,15 +63,6 @@ impl UiRect {
     }
 }
 
-impl Size {
-    fn map_to_taffy_size<T>(self, map_fn: impl Fn(Val) -> T) -> taffy::geometry::Size<T> {
-        taffy::geometry::Size {
-            width: map_fn(self.width),
-            height: map_fn(self.height),
-        }
-    }
-}
-
 pub fn from_style(context: &LayoutContext, style: &Style) -> taffy::style::Style {
     taffy::style::Style {
         display: style.display.into(),
@@ -102,17 +93,23 @@ pub fn from_style(context: &LayoutContext, style: &Style) -> taffy::style::Style
         flex_grow: style.flex_grow,
         flex_shrink: style.flex_shrink,
         flex_basis: style.flex_basis.into_dimension(context),
-        size: style.size.map_to_taffy_size(|s| s.into_dimension(context)),
-        min_size: style
-            .min_size
-            .map_to_taffy_size(|s| s.into_dimension(context)),
-        max_size: style
-            .max_size
-            .map_to_taffy_size(|s| s.into_dimension(context)),
+        size: taffy::prelude::Size {
+            width: style.width.into_dimension(context),
+            height: style.height.into_dimension(context),
+        },
+        min_size: taffy::prelude::Size {
+            width: style.min_width.into_dimension(context),
+            height: style.min_height.into_dimension(context),
+        },
+        max_size: taffy::prelude::Size {
+            width: style.max_width.into_dimension(context),
+            height: style.max_height.into_dimension(context),
+        },
         aspect_ratio: style.aspect_ratio,
-        gap: style
-            .gap
-            .map_to_taffy_size(|s| s.into_length_percentage(context)),
+        gap: taffy::prelude::Size {
+            width: style.column_gap.into_length_percentage(context),
+            height: style.row_gap.into_length_percentage(context),
+        },
         grid_auto_flow: style.grid_auto_flow.into(),
         grid_template_rows: style
             .grid_template_rows
@@ -439,24 +436,16 @@ mod tests {
             flex_grow: 1.,
             flex_shrink: 0.,
             flex_basis: Val::Px(0.),
-            size: Size {
-                width: Val::Px(0.),
-                height: Val::Auto,
-            },
-            min_size: Size {
-                width: Val::Px(0.),
-                height: Val::Percent(0.),
-            },
-            max_size: Size {
-                width: Val::Auto,
-                height: Val::Px(0.),
-            },
+            width: Val::Px(0.),
+            height: Val::Auto,
+            min_width: Val::Px(0.),
+            min_height: Val::Percent(0.),
+            max_width: Val::Auto,
+            max_height: Val::Px(0.),
             aspect_ratio: None,
             overflow: crate::Overflow::clip(),
-            gap: Size {
-                width: Val::Px(0.),
-                height: Val::Percent(0.),
-            },
+            column_gap: Val::Px(0.),
+            row_gap: Val::Percent(0.),
             grid_auto_flow: GridAutoFlow::ColumnDense,
             grid_template_rows: vec![
                 GridTrack::px(10.0),
diff --git a/crates/bevy_ui/src/lib.rs b/crates/bevy_ui/src/lib.rs
index b7ec10fb290b5..3cc3c9b157485 100644
--- a/crates/bevy_ui/src/lib.rs
+++ b/crates/bevy_ui/src/lib.rs
@@ -109,7 +109,6 @@ impl Plugin for UiPlugin {
             .register_type::<Overflow>()
             .register_type::<OverflowAxis>()
             .register_type::<PositionType>()
-            .register_type::<Size>()
             .register_type::<UiRect>()
             .register_type::<Style>()
             .register_type::<BackgroundColor>()
diff --git a/crates/bevy_ui/src/ui_node.rs b/crates/bevy_ui/src/ui_node.rs
index fd551d3d365e8..ba44fd319af08 100644
--- a/crates/bevy_ui/src/ui_node.rs
+++ b/crates/bevy_ui/src/ui_node.rs
@@ -1,4 +1,4 @@
-use crate::{Size, UiRect};
+use crate::UiRect;
 use bevy_asset::Handle;
 use bevy_ecs::{prelude::Component, reflect::ReflectComponent};
 use bevy_math::{Rect, Vec2};
@@ -336,32 +336,35 @@ pub struct Style {
     /// <https://developer.mozilla.org/en-US/docs/Web/CSS/bottom>
     pub bottom: Val,
 
-    /// The ideal size of the node
+    /// The ideal width of the node. `width` is used when it is within the bounds defined by `min_width` and `max_width`.
     ///
-    /// `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>
+    pub width: Val,
+
+    /// The ideal height of the node. `height` is used when it is within the bounds defined by `min_height` and `max_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,
+    pub height: Val,
 
-    /// The minimum size of the node
+    /// The minimum width of the node. `min_width` is used if it is greater than either `width` and/or `max_width`.
     ///
-    /// `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>
+    pub min_width: Val,
+
+    /// The minimum height of the node. `min_height` is used if it is greater than either `height` and/or `max_height`.
     ///
-    /// <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,
+    pub min_height: Val,
 
-    /// The maximum size of the node
+    /// The maximum width of the node. `max_width` is used if it is within the bounds defined by `min_width` and `width`.
     ///
-    /// `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>
+    pub max_width: Val,
+
+    /// The maximum height of the node. `max_height` is used if it is within the bounds defined by `min_height` and `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,
+    pub max_height: Val,
 
     /// The aspect ratio of the node (defined as `width / height`)
     ///
@@ -506,12 +509,19 @@ pub struct Style {
     /// <https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis>
     pub flex_basis: Val,
 
-    /// The size of the gutters between items in flexbox layout or rows/columns in a grid layout
+    /// The size of the gutters between items in a vertical flexbox layout or between rows in a grid layout
+    ///
+    /// Note: Values of `Val::Auto` are not valid and are treated as zero.
+    ///
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap>
+    pub row_gap: Val,
+
+    /// The size of the gutters between items in a horizontal flexbox layout or between column in a grid layout
     ///
     /// Note: Values of `Val::Auto` are not valid and are treated as zero.
     ///
-    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/gap>
-    pub gap: Size,
+    /// <https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap>
+    pub column_gap: Val,
 
     /// 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
@@ -576,12 +586,16 @@ impl Style {
         flex_grow: 0.0,
         flex_shrink: 1.0,
         flex_basis: Val::Auto,
-        size: Size::AUTO,
-        min_size: Size::AUTO,
-        max_size: Size::AUTO,
+        width: Val::Auto,
+        height: Val::Auto,
+        min_width: Val::Auto,
+        min_height: Val::Auto,
+        max_width: Val::Auto,
+        max_height: Val::Auto,
         aspect_ratio: None,
         overflow: Overflow::DEFAULT,
-        gap: Size::all(Val::Px(0.0)),
+        row_gap: Val::Px(0.0),
+        column_gap: Val::Px(0.0),
         grid_auto_flow: GridAutoFlow::DEFAULT,
         grid_template_rows: Vec::new(),
         grid_template_columns: Vec::new(),
diff --git a/examples/ecs/apply_system_buffers.rs b/examples/ecs/apply_system_buffers.rs
index 893dc71cd51b2..a9ab0d3e50d8f 100644
--- a/examples/ecs/apply_system_buffers.rs
+++ b/examples/ecs/apply_system_buffers.rs
@@ -69,7 +69,7 @@ fn setup(mut commands: Commands) {
     commands
         .spawn(NodeBundle {
             style: Style {
-                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+                width: Val::Percent(100.0),
                 align_items: AlignItems::Center,
                 justify_content: JustifyContent::Center,
                 flex_direction: FlexDirection::Column,
diff --git a/examples/ecs/state.rs b/examples/ecs/state.rs
index af4da80d1823b..aa4810bd80b73 100644
--- a/examples/ecs/state.rs
+++ b/examples/ecs/state.rs
@@ -53,7 +53,7 @@ fn setup_menu(mut commands: Commands) {
         .spawn(NodeBundle {
             style: Style {
                 // center button
-                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+                width: Val::Percent(100.),
                 justify_content: JustifyContent::Center,
                 align_items: AlignItems::Center,
                 ..default()
@@ -64,7 +64,8 @@ fn setup_menu(mut commands: Commands) {
             parent
                 .spawn(ButtonBundle {
                     style: Style {
-                        size: Size::new(Val::Px(150.0), Val::Px(65.0)),
+                        width: Val::Px(150.),
+                        height: Val::Px(65.),
                         // horizontally center child text
                         justify_content: JustifyContent::Center,
                         // vertically center child text
diff --git a/examples/games/alien_cake_addict.rs b/examples/games/alien_cake_addict.rs
index a61c4f3e127a4..12b2753229b58 100644
--- a/examples/games/alien_cake_addict.rs
+++ b/examples/games/alien_cake_addict.rs
@@ -388,7 +388,7 @@ fn display_score(mut commands: Commands, game: Res<Game>) {
     commands
         .spawn(NodeBundle {
             style: Style {
-                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+                width: Val::Percent(100.),
                 align_items: AlignItems::Center,
                 justify_content: JustifyContent::Center,
                 ..default()
diff --git a/examples/games/game_menu.rs b/examples/games/game_menu.rs
index ff39d23d44c70..3ecdf6ef21f1c 100644
--- a/examples/games/game_menu.rs
+++ b/examples/games/game_menu.rs
@@ -85,7 +85,7 @@ mod splash {
                     style: Style {
                         align_items: AlignItems::Center,
                         justify_content: JustifyContent::Center,
-                        size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+                        width: Val::Percent(100.0),
                         ..default()
                     },
                     ..default()
@@ -96,7 +96,7 @@ mod splash {
                 parent.spawn(ImageBundle {
                     style: Style {
                         // This will set the logo to be 200px wide, and auto adjust its height
-                        size: Size::new(Val::Px(200.0), Val::Auto),
+                        width: Val::Px(200.0),
                         ..default()
                     },
                     image: UiImage::new(icon),
@@ -152,7 +152,8 @@ mod game {
             .spawn((
                 NodeBundle {
                     style: Style {
-                        size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+                        width: Val::Percent(100.0),
+                        height: Val::Percent(100.0),
                         // center children
                         align_items: AlignItems::Center,
                         justify_content: JustifyContent::Center,
@@ -397,14 +398,15 @@ mod menu {
     fn main_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
         // Common style for all buttons on the screen
         let button_style = Style {
-            size: Size::new(Val::Px(250.0), Val::Px(65.0)),
+            width: Val::Px(250.0),
+            height: Val::Px(65.0),
             margin: UiRect::all(Val::Px(20.0)),
             justify_content: JustifyContent::Center,
             align_items: AlignItems::Center,
             ..default()
         };
         let button_icon_style = Style {
-            size: Size::new(Val::Px(30.0), Val::Auto),
+            width: Val::Px(30.0),
             // This takes the icons out of the flexbox flow, to be positioned exactly
             position_type: PositionType::Absolute,
             // The icon will be close to the left border of the button
@@ -422,7 +424,7 @@ mod menu {
             .spawn((
                 NodeBundle {
                     style: Style {
-                        size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+                        width: Val::Percent(100.0),
                         align_items: AlignItems::Center,
                         justify_content: JustifyContent::Center,
                         ..default()
@@ -529,7 +531,8 @@ mod menu {
 
     fn settings_menu_setup(mut commands: Commands) {
         let button_style = Style {
-            size: Size::new(Val::Px(200.0), Val::Px(65.0)),
+            width: Val::Px(200.0),
+            height: Val::Px(65.0),
             margin: UiRect::all(Val::Px(20.0)),
             justify_content: JustifyContent::Center,
             align_items: AlignItems::Center,
@@ -546,7 +549,7 @@ mod menu {
             .spawn((
                 NodeBundle {
                     style: Style {
-                        size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+                        width: Val::Percent(100.0),
                         align_items: AlignItems::Center,
                         justify_content: JustifyContent::Center,
                         ..default()
@@ -594,7 +597,8 @@ mod menu {
 
     fn display_settings_menu_setup(mut commands: Commands, display_quality: Res<DisplayQuality>) {
         let button_style = Style {
-            size: Size::new(Val::Px(200.0), Val::Px(65.0)),
+            width: Val::Px(200.0),
+            height: Val::Px(65.0),
             margin: UiRect::all(Val::Px(20.0)),
             justify_content: JustifyContent::Center,
             align_items: AlignItems::Center,
@@ -610,7 +614,7 @@ mod menu {
             .spawn((
                 NodeBundle {
                     style: Style {
-                        size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+                        width: Val::Percent(100.0),
                         align_items: AlignItems::Center,
                         justify_content: JustifyContent::Center,
                         ..default()
@@ -656,7 +660,8 @@ mod menu {
                                 ] {
                                     let mut entity = parent.spawn(ButtonBundle {
                                         style: Style {
-                                            size: Size::new(Val::Px(150.0), Val::Px(65.0)),
+                                            width: Val::Px(150.0),
+                                            height: Val::Px(65.0),
                                             ..button_style.clone()
                                         },
                                         background_color: NORMAL_BUTTON.into(),
@@ -692,7 +697,8 @@ mod menu {
 
     fn sound_settings_menu_setup(mut commands: Commands, volume: Res<Volume>) {
         let button_style = Style {
-            size: Size::new(Val::Px(200.0), Val::Px(65.0)),
+            width: Val::Px(200.0),
+            height: Val::Px(65.0),
             margin: UiRect::all(Val::Px(20.0)),
             justify_content: JustifyContent::Center,
             align_items: AlignItems::Center,
@@ -708,7 +714,7 @@ mod menu {
             .spawn((
                 NodeBundle {
                     style: Style {
-                        size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+                        width: Val::Percent(100.0),
                         align_items: AlignItems::Center,
                         justify_content: JustifyContent::Center,
                         ..default()
@@ -746,7 +752,8 @@ mod menu {
                                 for volume_setting in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] {
                                     let mut entity = parent.spawn(ButtonBundle {
                                         style: Style {
-                                            size: Size::new(Val::Px(30.0), Val::Px(65.0)),
+                                            width: Val::Px(30.0),
+                                            height: Val::Px(65.0),
                                             ..button_style.clone()
                                         },
                                         background_color: NORMAL_BUTTON.into(),
diff --git a/examples/stress_tests/many_buttons.rs b/examples/stress_tests/many_buttons.rs
index d6591979a7b41..ef0bb8064d049 100644
--- a/examples/stress_tests/many_buttons.rs
+++ b/examples/stress_tests/many_buttons.rs
@@ -78,7 +78,7 @@ fn setup(mut commands: Commands) {
     commands
         .spawn(NodeBundle {
             style: Style {
-                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+                width: Val::Percent(100.),
                 ..default()
             },
             ..default()
@@ -106,7 +106,8 @@ fn spawn_button(
     let mut builder = commands.spawn((
         ButtonBundle {
             style: Style {
-                size: Size::new(Val::Percent(width), Val::Percent(width)),
+                width: Val::Percent(width),
+                height: Val::Percent(width),
                 bottom: Val::Percent(100.0 / total * i as f32),
                 left: Val::Percent(100.0 / total * j as f32),
                 align_items: AlignItems::Center,
diff --git a/examples/stress_tests/many_glyphs.rs b/examples/stress_tests/many_glyphs.rs
index 5482f4dcfb5e5..0831ae0aec297 100644
--- a/examples/stress_tests/many_glyphs.rs
+++ b/examples/stress_tests/many_glyphs.rs
@@ -63,7 +63,7 @@ fn setup(mut commands: Commands) {
             commands.spawn(TextBundle {
                 text: text.clone(),
                 style: Style {
-                    size: Size::width(Val::Px(1000.)),
+                    width: Val::Px(1000.),
                     ..Default::default()
                 },
                 ..Default::default()
diff --git a/examples/ui/button.rs b/examples/ui/button.rs
index d91be809964d2..aed15cb1142fe 100644
--- a/examples/ui/button.rs
+++ b/examples/ui/button.rs
@@ -49,7 +49,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands
         .spawn(NodeBundle {
             style: Style {
-                size: Size::width(Val::Percent(100.0)),
+                width: Val::Percent(100.0),
                 align_items: AlignItems::Center,
                 justify_content: JustifyContent::Center,
                 ..default()
@@ -60,7 +60,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             parent
                 .spawn(ButtonBundle {
                     style: Style {
-                        size: Size::new(Val::Px(150.0), Val::Px(65.0)),
+                        width: Val::Px(150.0),
+                        height: Val::Px(65.0),
                         // horizontally center child text
                         justify_content: JustifyContent::Center,
                         // vertically center child text
diff --git a/examples/ui/flex_layout.rs b/examples/ui/flex_layout.rs
index 8caaf4b555be8..6e7c736ee24e1 100644
--- a/examples/ui/flex_layout.rs
+++ b/examples/ui/flex_layout.rs
@@ -26,7 +26,7 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
         .spawn(NodeBundle {
             style: Style {
                 // fill the entire window
-                size: Size::all(Val::Percent(100.)),
+                width: Val::Percent(100.),
                 flex_direction: FlexDirection::Column,
                 align_items: AlignItems::Center,
                 ..Default::default()
@@ -65,7 +65,8 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
             builder
                 .spawn(NodeBundle {
                     style: Style {
-                        min_size: Size::new(Val::Px(850.), Val::Px(1020.)),
+                        width: Val::Px(850.),
+                        height: Val::Px(1020.),
                         flex_direction: FlexDirection::Column,
                         ..Default::default()
                     },
@@ -124,7 +125,8 @@ fn spawn_child_node(
                 flex_direction: FlexDirection::Column,
                 align_items,
                 justify_content,
-                size: Size::all(Val::Px(160.)),
+                width: Val::Px(160.),
+                height: Val::Px(160.),
                 margin: UiRect::all(MARGIN),
                 ..Default::default()
             },
diff --git a/examples/ui/grid.rs b/examples/ui/grid.rs
index df674067f787a..9012e198d8708 100644
--- a/examples/ui/grid.rs
+++ b/examples/ui/grid.rs
@@ -26,7 +26,8 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
                 /// 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.)),
+                width: Val::Percent(100.0),
+                height: Val::Percent(100.0),
                 /// 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
@@ -67,7 +68,7 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
                 .spawn(NodeBundle {
                     style: Style {
                         /// Make the height of the node fill its parent
-                        size: Size::height(Val::Percent(100.0)),
+                        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),
@@ -82,7 +83,8 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
                         /// 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)),
+                        row_gap: Val::Px(12.0),
+                        column_gap: Val::Px(12.0),
                         ..default()
                     },
                     background_color: BackgroundColor(Color::DARK_GRAY),
@@ -130,7 +132,7 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
                         // can be top-aligned. Normally you'd use flexbox for this, but this is the CSS Grid example so we're using grid.
                         grid_template_rows: vec![GridTrack::auto(), GridTrack::auto(), GridTrack::fr(1.0)],
                         // Add a 10px gap between rows
-                        gap: Size::height(Val::Px(10.)),
+                        row_gap: Val::Px(10.),
                         ..default()
                     },
                     background_color: BackgroundColor(Color::BLACK),
diff --git a/examples/ui/overflow.rs b/examples/ui/overflow.rs
index e476bd3f43b8f..12c922c92d993 100644
--- a/examples/ui/overflow.rs
+++ b/examples/ui/overflow.rs
@@ -27,7 +27,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             style: Style {
                 align_items: AlignItems::Center,
                 justify_content: JustifyContent::Center,
-                size: Size::width(Val::Percent(100.)),
+                width: Val::Percent(100.),
                 ..Default::default()
             },
             background_color: Color::ANTIQUE_WHITE.into(),
@@ -71,7 +71,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         parent
                             .spawn(NodeBundle {
                                 style: Style {
-                                    size: Size::all(Val::Px(100.)),
+                                    width: Val::Px(100.),
+                                    height: Val::Px(100.),
                                     padding: UiRect {
                                         left: Val::Px(25.),
                                         top: Val::Px(25.),
@@ -87,7 +88,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                 parent.spawn(ImageBundle {
                                     image: UiImage::new(image.clone()),
                                     style: Style {
-                                        min_size: Size::all(Val::Px(100.)),
+                                        min_width: Val::Px(100.),
+                                        min_height: Val::Px(100.),
                                         ..Default::default()
                                     },
                                     background_color: Color::WHITE.into(),
diff --git a/examples/ui/overflow_debug.rs b/examples/ui/overflow_debug.rs
index b4d9b4afdf4ba..1f01dcc4b4044 100644
--- a/examples/ui/overflow_debug.rs
+++ b/examples/ui/overflow_debug.rs
@@ -86,7 +86,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands
         .spawn(NodeBundle {
             style: Style {
-                size: Size::width(Val::Percent(100.)),
+                width: Val::Percent(100.),
+                height: Val::Percent(100.),
                 flex_direction: FlexDirection::Column,
                 ..default()
             },
@@ -96,7 +97,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             parent
                 .spawn(NodeBundle {
                     style: Style {
-                        size: Size::height(Val::Px(32.)),
+                        height: Val::Px(32.),
                         align_items: AlignItems::Center,
                         justify_content: JustifyContent::Center,
                         ..default()
@@ -149,7 +150,7 @@ fn spawn_row(parent: &mut ChildBuilder, spawn_children: impl FnOnce(&mut ChildBu
     parent
         .spawn(NodeBundle {
             style: Style {
-                size: Size::width(Val::Percent(50.)),
+                width: Val::Percent(50.),
                 align_items: AlignItems::Center,
                 justify_content: JustifyContent::SpaceEvenly,
                 ..default()
@@ -168,7 +169,7 @@ fn spawn_image(
         parent.spawn(ImageBundle {
             image: UiImage::new(asset_server.load("branding/bevy_logo_dark_big.png")),
             style: Style {
-                size: Size::height(Val::Px(100.)),
+                height: Val::Px(100.),
                 position_type: PositionType::Absolute,
                 top: Val::Px(-50.),
                 left: Val::Px(-200.),
@@ -209,7 +210,8 @@ fn spawn_container(
         .spawn((
             NodeBundle {
                 style: Style {
-                    size: Size::new(Val::Px(CONTAINER_SIZE), Val::Px(CONTAINER_SIZE)),
+                    width: Val::Px(CONTAINER_SIZE),
+                    height: Val::Px(CONTAINER_SIZE),
                     align_items: AlignItems::Center,
                     justify_content: JustifyContent::Center,
                     overflow: Overflow::clip(),
@@ -304,10 +306,13 @@ fn next_container_size(
         for (mut style, mut container) in &mut containers {
             container.0 = (container.0 + 1) % 3;
 
-            style.size = match container.0 {
-                1 => Size::new(Val::Px(CONTAINER_SIZE), Val::Px(30.)),
-                2 => Size::new(Val::Px(30.), Val::Px(CONTAINER_SIZE)),
-                _ => Size::new(Val::Px(CONTAINER_SIZE), Val::Px(CONTAINER_SIZE)),
+            style.width = match container.0 {
+                2 => Val::Px(30.),
+                _ => Val::Px(CONTAINER_SIZE),
+            };
+            style.height = match container.0 {
+                1 => Val::Px(30.),
+                _ => Val::Px(CONTAINER_SIZE),
             };
         }
     }
diff --git a/examples/ui/relative_cursor_position.rs b/examples/ui/relative_cursor_position.rs
index d56df9c5ffaae..57eba52064ed9 100644
--- a/examples/ui/relative_cursor_position.rs
+++ b/examples/ui/relative_cursor_position.rs
@@ -18,7 +18,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands
         .spawn(NodeBundle {
             style: Style {
-                size: Size::width(Val::Percent(100.)),
+                width: Val::Percent(100.),
+                height: Val::Percent(100.),
                 align_items: AlignItems::Center,
                 justify_content: JustifyContent::Center,
                 flex_direction: FlexDirection::Column,
@@ -30,7 +31,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             parent
                 .spawn(NodeBundle {
                     style: Style {
-                        size: Size::all(Val::Px(250.0)),
+                        width: Val::Px(250.),
+                        height: Val::Px(250.),
                         margin: UiRect::bottom(Val::Px(15.)),
                         ..default()
                     },
diff --git a/examples/ui/size_constraints.rs b/examples/ui/size_constraints.rs
index 6807b1675526a..24ae9eb98ccfb 100644
--- a/examples/ui/size_constraints.rs
+++ b/examples/ui/size_constraints.rs
@@ -123,7 +123,8 @@ fn spawn_bar(parent: &mut ChildBuilder) {
                 .spawn(NodeBundle {
                     style: Style {
                         align_items: AlignItems::Stretch,
-                        size: Size::new(Val::Percent(100.), Val::Px(100.)),
+                        width: Val::Percent(100.),
+                        height: Val::Px(100.),
                         padding: UiRect::all(Val::Px(4.)),
                         ..Default::default()
                     },
@@ -181,8 +182,8 @@ fn spawn_button_row(parent: &mut ChildBuilder, constraint: Constraint, text_styl
                     parent
                         .spawn(NodeBundle {
                             style: Style {
-                                min_size: Size::width(Val::Px(200.)),
-                                max_size: Size::width(Val::Px(200.)),
+                                min_width: Val::Px(200.),
+                                max_width: Val::Px(200.),
                                 justify_content: JustifyContent::Center,
                                 align_items: AlignItems::Center,
                                 ..Default::default()
@@ -259,7 +260,7 @@ fn spawn_button(
             parent
                 .spawn(NodeBundle {
                     style: Style {
-                        size: Size::width(Val::Px(100.)),
+                        width: Val::Px(100.),
                         justify_content: JustifyContent::Center,
                         ..Default::default()
                     },
@@ -311,13 +312,13 @@ fn update_buttons(
                         style.flex_basis = value.0;
                     }
                     Constraint::Width => {
-                        style.size.width = value.0;
+                        style.width = value.0;
                     }
                     Constraint::MinWidth => {
-                        style.min_size.width = value.0;
+                        style.min_width = value.0;
                     }
                     Constraint::MaxWidth => {
-                        style.max_size.width = value.0;
+                        style.max_width = value.0;
                     }
                 }
             }
diff --git a/examples/ui/text_debug.rs b/examples/ui/text_debug.rs
index 6ee0ecf468539..04fbe70c34e22 100644
--- a/examples/ui/text_debug.rs
+++ b/examples/ui/text_debug.rs
@@ -56,7 +56,7 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
             position_type: PositionType::Absolute,
             top: Val::Px(5.0),
             right: Val::Px(15.0),
-            max_size: Size::width(Val::Px(400.)),
+            max_width: Val::Px(400.),
             ..default()
         })
     );
@@ -127,10 +127,7 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
             position_type: PositionType::Absolute,
             bottom: Val::Px(5.0),
             left: Val::Px(15.0),
-            size: Size {
-                width: Val::Px(200.0),
-                ..default()
-            },
+            width: Val::Px(200.0),
             ..default()
         }),
     );
diff --git a/examples/ui/text_wrap_debug.rs b/examples/ui/text_wrap_debug.rs
index 842b677be6108..0ef93cf6c25cd 100644
--- a/examples/ui/text_wrap_debug.rs
+++ b/examples/ui/text_wrap_debug.rs
@@ -25,7 +25,7 @@ fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
         .spawn(NodeBundle {
             style: Style {
                 flex_direction: FlexDirection::Column,
-                size: Size::new(Val::Percent(100.), Val::Percent(100.)),
+                width: Val::Percent(100.),
                 ..Default::default()
             },
             background_color: Color::BLACK.into(),
@@ -40,7 +40,8 @@ fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
                     flex_direction: FlexDirection::Row,
                     justify_content: JustifyContent::SpaceAround,
                     align_items: AlignItems::Center,
-                    size: Size::new(Val::Percent(100.), Val::Percent(50.)),
+                    width: Val::Percent(100.),
+                    height: Val::Percent(50.),
                     ..Default::default()
                 },
                 ..Default::default()
@@ -63,7 +64,8 @@ fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
                     style: Style {
                         justify_content: justification,
                         flex_direction: FlexDirection::Column,
-                        size: Size::new(Val::Percent(16.), Val::Percent(95.)),
+                        width: Val::Percent(16.),
+                        height: Val::Percent(95.),
                         overflow: Overflow::clip(),
                         ..Default::default()
                     },
diff --git a/examples/ui/transparency_ui.rs b/examples/ui/transparency_ui.rs
index 31a762d75bc50..2a6fe7f9b93d4 100644
--- a/examples/ui/transparency_ui.rs
+++ b/examples/ui/transparency_ui.rs
@@ -19,7 +19,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands
         .spawn(NodeBundle {
             style: Style {
-                size: Size::width(Val::Percent(100.0)),
+                width: Val::Percent(100.0),
                 align_items: AlignItems::Center,
                 justify_content: JustifyContent::SpaceAround,
                 ..default()
@@ -30,7 +30,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             parent
                 .spawn(ButtonBundle {
                     style: Style {
-                        size: Size::new(Val::Px(150.0), Val::Px(65.0)),
+                        width: Val::Px(150.0),
+                        height: Val::Px(65.0),
                         justify_content: JustifyContent::Center,
                         align_items: AlignItems::Center,
                         ..default()
@@ -55,7 +56,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             parent
                 .spawn(ButtonBundle {
                     style: Style {
-                        size: Size::new(Val::Px(150.0), Val::Px(65.0)),
+                        width: Val::Px(150.0),
+                        height: Val::Px(65.0),
                         justify_content: JustifyContent::Center,
                         align_items: AlignItems::Center,
                         ..default()
diff --git a/examples/ui/ui.rs b/examples/ui/ui.rs
index bf12b1a52e04f..d338446f9136b 100644
--- a/examples/ui/ui.rs
+++ b/examples/ui/ui.rs
@@ -28,7 +28,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands
         .spawn(NodeBundle {
             style: Style {
-                size: Size::all(Val::Percent(100.)),
+                width: Val::Percent(100.0),
+                height: Val::Percent(100.0),
                 justify_content: JustifyContent::SpaceBetween,
                 ..default()
             },
@@ -39,7 +40,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             parent
                 .spawn(NodeBundle {
                     style: Style {
-                        size: Size::width(Val::Px(200.)),
+                        width: Val::Px(200.),
                         border: UiRect::all(Val::Px(2.)),
                         ..default()
                     },
@@ -51,7 +52,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     parent
                         .spawn(NodeBundle {
                             style: Style {
-                                size: Size::width(Val::Percent(100.)),
+                                width: Val::Percent(100.),
                                 ..default()
                             },
                             background_color: Color::rgb(0.15, 0.15, 0.15).into(),
@@ -86,7 +87,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         flex_direction: FlexDirection::Column,
                         justify_content: JustifyContent::Center,
                         align_items: AlignItems::Center,
-                        size: Size::width(Val::Px(200.)),
+                        width: Val::Px(200.),
                         ..default()
                     },
                     background_color: Color::rgb(0.15, 0.15, 0.15).into(),
@@ -111,7 +112,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             style: Style {
                                 flex_direction: FlexDirection::Column,
                                 align_self: AlignSelf::Stretch,
-                                size: Size::height(Val::Percent(50.)),
+                                height: Val::Percent(50.),
                                 overflow: Overflow::clip_y(),
                                 ..default()
                             },
@@ -156,7 +157,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             parent
                 .spawn(NodeBundle {
                     style: Style {
-                        size: Size::all(Val::Px(200.)),
+                        width: Val::Px(200.0),
+                        height: Val::Px(200.0),
                         position_type: PositionType::Absolute,
                         left: Val::Px(210.),
                         bottom: Val::Px(10.),
@@ -169,7 +171,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 .with_children(|parent| {
                     parent.spawn(NodeBundle {
                         style: Style {
-                            size: Size::all(Val::Percent(100.)),
+                            width: Val::Percent(100.0),
+                            height: Val::Percent(100.0),
                             ..default()
                         },
                         background_color: Color::rgb(0.8, 0.8, 1.).into(),
@@ -180,7 +183,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             parent
                 .spawn(NodeBundle {
                     style: Style {
-                        size: Size::all(Val::Percent(100.)),
+                        width: Val::Percent(100.0),
+                        height: Val::Percent(100.0),
                         position_type: PositionType::Absolute,
                         align_items: AlignItems::Center,
                         justify_content: JustifyContent::Center,
@@ -192,7 +196,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     parent
                         .spawn(NodeBundle {
                             style: Style {
-                                size: Size::all(Val::Px(100.)),
+                                width: Val::Px(100.0),
+                                height: Val::Px(100.0),
                                 ..default()
                             },
                             background_color: Color::rgb(1.0, 0.0, 0.).into(),
@@ -202,7 +207,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             parent.spawn(NodeBundle {
                                 style: Style {
                                     // Take the size of the parent node.
-                                    size: Size::all(Val::Percent(100.)),
+                                    width: Val::Percent(100.0),
+                                    height: Val::Percent(100.0),
                                     position_type: PositionType::Absolute,
                                     left: Val::Px(20.),
                                     bottom: Val::Px(20.),
@@ -213,7 +219,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             });
                             parent.spawn(NodeBundle {
                                 style: Style {
-                                    size: Size::all(Val::Percent(100.)),
+                                    width: Val::Percent(100.0),
+                                    height: Val::Percent(100.0),
                                     position_type: PositionType::Absolute,
                                     left: Val::Px(40.),
                                     bottom: Val::Px(40.),
@@ -224,7 +231,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             });
                             parent.spawn(NodeBundle {
                                 style: Style {
-                                    size: Size::all(Val::Percent(100.)),
+                                    width: Val::Percent(100.0),
+                                    height: Val::Percent(100.0),
                                     position_type: PositionType::Absolute,
                                     left: Val::Px(60.),
                                     bottom: Val::Px(60.),
@@ -236,7 +244,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             // alpha test
                             parent.spawn(NodeBundle {
                                 style: Style {
-                                    size: Size::all(Val::Percent(100.)),
+                                    width: Val::Percent(100.0),
+                                    height: Val::Percent(100.0),
                                     position_type: PositionType::Absolute,
                                     left: Val::Px(80.),
                                     bottom: Val::Px(80.),
@@ -251,7 +260,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             parent
                 .spawn(NodeBundle {
                     style: Style {
-                        size: Size::width(Val::Percent(100.)),
+                        width: Val::Percent(100.0),
                         position_type: PositionType::Absolute,
                         justify_content: JustifyContent::Center,
                         align_items: AlignItems::FlexStart,
@@ -265,7 +274,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     parent
                         .spawn(ImageBundle {
                             style: Style {
-                                size: Size::width(Val::Px(500.0)),
+                                width: Val::Px(500.0),
                                 ..default()
                             },
                             ..default()
diff --git a/examples/ui/ui_scaling.rs b/examples/ui/ui_scaling.rs
index 0fa231f655398..2b4c8551e6e83 100644
--- a/examples/ui/ui_scaling.rs
+++ b/examples/ui/ui_scaling.rs
@@ -36,7 +36,8 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
     commands
         .spawn(NodeBundle {
             style: Style {
-                size: Size::new(Val::Percent(50.0), Val::Percent(50.0)),
+                width: Val::Percent(50.0),
+                height: Val::Percent(50.0),
                 position_type: PositionType::Absolute,
                 left: Val::Percent(25.),
                 top: Val::Percent(25.),
@@ -51,7 +52,8 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
             parent
                 .spawn(NodeBundle {
                     style: Style {
-                        size: Size::new(Val::Px(40.), Val::Px(40.)),
+                        width: Val::Px(40.0),
+                        height: Val::Px(40.0),
                         ..default()
                     },
                     background_color: Color::RED.into(),
@@ -62,7 +64,8 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
                 });
             parent.spawn(NodeBundle {
                 style: Style {
-                    size: Size::new(Val::Percent(15.), Val::Percent(15.)),
+                    width: Val::Percent(15.0),
+                    height: Val::Percent(15.0),
                     ..default()
                 },
                 background_color: Color::BLUE.into(),
@@ -70,7 +73,8 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
             });
             parent.spawn(ImageBundle {
                 style: Style {
-                    size: Size::new(Val::Px(30.0), Val::Px(30.0)),
+                    width: Val::Px(30.0),
+                    height: Val::Px(30.0),
                     ..default()
                 },
                 image: asset_server.load("branding/icon.png").into(),
diff --git a/examples/ui/z_index.rs b/examples/ui/z_index.rs
index 7bf1d80cbc7af..f6eae5fe5c124 100644
--- a/examples/ui/z_index.rs
+++ b/examples/ui/z_index.rs
@@ -22,7 +22,7 @@ fn setup(mut commands: Commands) {
     commands
         .spawn(NodeBundle {
             style: Style {
-                size: Size::width(Val::Percent(100.0)),
+                width: Val::Percent(100.),
                 align_items: AlignItems::Center,
                 justify_content: JustifyContent::Center,
                 ..default()
@@ -34,7 +34,8 @@ fn setup(mut commands: Commands) {
                 .spawn(NodeBundle {
                     background_color: Color::GRAY.into(),
                     style: Style {
-                        size: Size::new(Val::Px(180.0), Val::Px(100.0)),
+                        width: Val::Px(180.0),
+                        height: Val::Px(100.0),
                         ..default()
                     },
                     ..default()
@@ -47,7 +48,8 @@ fn setup(mut commands: Commands) {
                             position_type: PositionType::Absolute,
                             left: Val::Px(10.0),
                             bottom: Val::Px(40.0),
-                            size: Size::new(Val::Px(100.0), Val::Px(50.0)),
+                            width: Val::Px(100.0),
+                            height: Val::Px(50.0),
                             ..default()
                         },
                         ..default()
@@ -62,7 +64,8 @@ fn setup(mut commands: Commands) {
                             position_type: PositionType::Absolute,
                             left: Val::Px(45.0),
                             bottom: Val::Px(30.0),
-                            size: Size::new(Val::Px(100.0), Val::Px(50.0)),
+                            width: Val::Px(100.),
+                            height: Val::Px(50.),
                             ..default()
                         },
                         ..default()
@@ -77,7 +80,8 @@ fn setup(mut commands: Commands) {
                             position_type: PositionType::Absolute,
                             left: Val::Px(70.0),
                             bottom: Val::Px(20.0),
-                            size: Size::new(Val::Px(100.0), Val::Px(75.0)),
+                            width: Val::Px(100.),
+                            height: Val::Px(75.),
                             ..default()
                         },
                         ..default()
@@ -93,7 +97,8 @@ fn setup(mut commands: Commands) {
                             position_type: PositionType::Absolute,
                             left: Val::Px(15.0),
                             bottom: Val::Px(10.0),
-                            size: Size::new(Val::Px(100.0), Val::Px(60.0)),
+                            width: Val::Px(100.),
+                            height: Val::Px(60.),
                             ..default()
                         },
                         ..default()
@@ -109,7 +114,8 @@ fn setup(mut commands: Commands) {
                             position_type: PositionType::Absolute,
                             left: Val::Px(-15.0),
                             bottom: Val::Px(-15.0),
-                            size: Size::new(Val::Px(100.0), Val::Px(125.0)),
+                            width: Val::Px(100.),
+                            height: Val::Px(125.),
                             ..default()
                         },
                         ..default()
diff --git a/examples/window/scale_factor_override.rs b/examples/window/scale_factor_override.rs
index 60e7eb26c48da..a465432c000ac 100644
--- a/examples/window/scale_factor_override.rs
+++ b/examples/window/scale_factor_override.rs
@@ -27,7 +27,7 @@ fn setup(mut commands: Commands) {
     commands
         .spawn(NodeBundle {
             style: Style {
-                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+                width: Val::Percent(100.0),
                 justify_content: JustifyContent::SpaceBetween,
                 ..default()
             },
@@ -38,7 +38,8 @@ fn setup(mut commands: Commands) {
             parent
                 .spawn(NodeBundle {
                     style: Style {
-                        size: Size::new(Val::Px(200.0), Val::Percent(100.0)),
+                        width: Val::Px(200.0),
+                        height: Val::Percent(100.0),
                         border: UiRect::all(Val::Px(2.0)),
                         ..default()
                     },
diff --git a/examples/window/window_resizing.rs b/examples/window/window_resizing.rs
index dcfee4a56ad04..6f130f5fa5d4d 100644
--- a/examples/window/window_resizing.rs
+++ b/examples/window/window_resizing.rs
@@ -36,7 +36,7 @@ fn setup_ui(mut cmd: Commands) {
     // Node that fills entire background
     cmd.spawn(NodeBundle {
         style: Style {
-            size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+            width: Val::Percent(100.),
             ..default()
         },
         ..default()