diff --git a/BREAKING.md b/BREAKING.md
index fc500f64888..e48fe76f98d 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -19,6 +19,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Button](#version-9x-button)
   - [Card](#version-9x-card)
   - [Chip](#version-9x-chip)
+  - [Col](#version-9x-col)
   - [Content](#version-9x-content)
   - [Datetime](#version-9x-datetime)
   - [Grid](#version-9x-grid)
@@ -27,6 +28,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Item Divider](#version-9x-item-divider)
   - [Menu Toggle](#version-9x-menu-toggle)
   - [Radio Group](#version-9x-radio-group)
+  - [Row](#version-9x-row)
   - [Spinner](#version-9x-spinner)
   - [Text](#version-9x-text)
   - [Textarea](#version-9x-textarea)
@@ -87,6 +89,25 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 - Specific theme classes (e.g., `ion-chip.md`) are no longer supported. Style modifications based on the active theme must be implemented using theme tokens rather than direct class targeting.
 - The `border-radius` of the `ios` and `md` chip now defaults to `10px` and `8px`, respectively, instead of `16px` in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"round"`, or override the `IonChip.shape.round.border.radius` to specify a different value for global styles and `--ion-chip-shape-round-border-radius` for component-specific styles.
 
+<h4 id="version-9x-col">Col</h4>
+
+The following breaking changes apply to `ion-col`:
+
+1. `--ion-grid-column-padding-*` CSS variables have been replaced with per-side, per-breakpoint tokens in the `col` namespace. <sup>[1](#version-9x-col-padding-variables)</sup>
+2. Theme classes (`ion-col.md`, `ion-col.ios`) are no longer supported. <sup>[2](#version-9x-col-theme-classes)</sup>
+
+<h5 id="version-9x-col-padding-variables">Padding variables</h5>
+
+Column padding was a single value per breakpoint and is now set per-side, and the variables have moved from the `grid` namespace to the `col` namespace. Use the new token structure for global styles, or the corresponding CSS variable for component-specific overrides:
+
+| Old (8.x) | New token (global) | New CSS variable (component-specific) |
+|---|---|---|
+| `--ion-grid-column-padding-{bp}` | `IonCol.breakpoint.{bp}.padding.{top\|end\|bottom\|start}` | `--ion-col-breakpoint-{bp}-padding-{top\|end\|bottom\|start}` |
+
+<h5 id="version-9x-col-theme-classes">Theme classes</h5>
+
+Remove any instances that target the theme classes: `ion-col.md`, `ion-col.ios`.
+
 <h4 id="version-9x-content">Content</h4>
 
 The following breaking changes apply to `ion-content`:
@@ -141,9 +162,32 @@ Remove any instances that target the theme classes: `ion-content.md`, `ion-conte
 
 <h4 id="version-9x-grid">Grid</h4>
 
-- The properties `pull` and `push` have been deprecated and no longer work. A similar look can be achieved with the newly added property `order`.
+The following breaking changes apply to `ion-grid`:
+
+1. `--ion-grid-padding-*` CSS variables have been replaced with per-side, per-breakpoint tokens. <sup>[1](#version-9x-grid-padding-variables)</sup>
+2. `--ion-grid-width-*` CSS variables for the fixed grid have been replaced with per-breakpoint tokens. <sup>[2](#version-9x-grid-fixed-width-variables)</sup>
+3. The `push` and `pull` properties have been deprecated. <sup>[3](#version-9x-grid-deprecated-push-and-pull-properties)</sup>
+4. Theme classes (`ion-grid.md`, `ion-grid.ios`) are no longer supported. <sup>[4](#version-9x-grid-theme-classes)</sup>
+
+<h5 id="version-9x-grid-padding-variables">Padding variables</h5>
 
-<h5>Example 1: Swap two columns</h5>
+Grid padding was a single value per breakpoint and is now set per-side. Use the new token structure for global styles, or the corresponding CSS variable for component-specific overrides:
+
+| Old (8.x) | New token (global) | New CSS variable (component-specific) |
+|---|---|---|
+| `--ion-grid-padding-{bp}` | `IonGrid.breakpoint.{bp}.padding.{top\|end\|bottom\|start}` | `--ion-grid-breakpoint-{bp}-padding-{top\|end\|bottom\|start}` |
+
+<h5 id="version-9x-grid-fixed-width-variables">Fixed width variables</h5>
+
+| Old (8.x) | New token (global) | New CSS variable (component-specific) |
+|---|---|---|
+| `--ion-grid-width-{bp}` | `IonGrid.breakpoint.{bp}.width` | `--ion-grid-breakpoint-{bp}-width` |
+
+<h5 id="version-9x-grid-deprecated-push-and-pull-properties">Deprecated <code>push</code> and <code>pull</code> properties</h5>
+
+The `push` and `pull` properties have been disabled. They now log a deprecation warning and no longer affect layout. Use the `order` property to achieve a similar result.
+
+**Example 1: Swap two columns**
 
 **Version up to 8.x**
 
@@ -169,7 +213,7 @@ Remove any instances that target the theme classes: `ion-content.md`, `ion-conte
 </ion-grid>
 ```
 
-<h5>Example 2: Reorder columns with specific sizes</h5>
+**Example 2: Reorder columns with specific sizes**
 
 To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `size="3" pull="9"`:
 
@@ -195,7 +239,7 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
 </ion-grid>
 ```
 
-<h5>Example 3: Push</h5>
+**Example 3: Push**
 
 ```html
 <ion-grid>
@@ -225,7 +269,7 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
 </ion-grid>
 ```
 
-<h5>Example 4: Push and Pull</h5>
+**Example 4: Push and Pull**
 
 ```html
 <ion-grid>
@@ -255,6 +299,10 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
 </ion-grid>
 ```
 
+<h5 id="version-9x-grid-theme-classes">Theme classes</h5>
+
+Remove any instances that target the theme classes: `ion-grid.md`, `ion-grid.ios`.
+
 <h4 id="version-9x-image">Image</h4>
 
 The following breaking changes apply to `ion-img`:
@@ -304,6 +352,16 @@ If you were targeting the internals of `ion-radio-group` in your CSS, you will n
 
 Additionally, the `radio-group-wrapper` div element has been removed, causing slotted elements to be direct children of the `ion-radio-group`.
 
+<h4 id="version-9x-row">Row</h4>
+
+The following breaking changes apply to `ion-row`:
+
+1. Theme classes (`ion-row.md`, `ion-row.ios`) are no longer supported. <sup>[1](#version-9x-row-theme-classes)</sup>
+
+<h5 id="version-9x-row-theme-classes">Theme classes</h5>
+
+Remove any instances that target the theme classes: `ion-row.md`, `ion-row.ios`.
+
 <h4 id="version-9x-spinner">Spinner</h4>
 
 - Component CSS variables have been removed. The component now utilizes the centralized Ionic Theming system. Global updates should be managed via the theme tokens file, while component-specific overrides are handled through localized CSS variables.
diff --git a/core/api.txt b/core/api.txt
index 56e39615965..36040cb0c13 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -781,15 +781,26 @@ ion-col,prop,sizeMd,string | undefined,undefined,false,false
 ion-col,prop,sizeSm,string | undefined,undefined,false,false
 ion-col,prop,sizeXl,string | undefined,undefined,false,false
 ion-col,prop,sizeXs,string | undefined,undefined,false,false
-ion-col,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-col,css-prop,--col-unit-size
-ion-col,css-prop,--ion-grid-column-padding
-ion-col,css-prop,--ion-grid-column-padding-lg
-ion-col,css-prop,--ion-grid-column-padding-md
-ion-col,css-prop,--ion-grid-column-padding-sm
-ion-col,css-prop,--ion-grid-column-padding-xl
-ion-col,css-prop,--ion-grid-column-padding-xs
-ion-col,css-prop,--ion-grid-columns
+ion-col,css-prop,--ion-col-breakpoint-lg-padding-bottom
+ion-col,css-prop,--ion-col-breakpoint-lg-padding-end
+ion-col,css-prop,--ion-col-breakpoint-lg-padding-start
+ion-col,css-prop,--ion-col-breakpoint-lg-padding-top
+ion-col,css-prop,--ion-col-breakpoint-md-padding-bottom
+ion-col,css-prop,--ion-col-breakpoint-md-padding-end
+ion-col,css-prop,--ion-col-breakpoint-md-padding-start
+ion-col,css-prop,--ion-col-breakpoint-md-padding-top
+ion-col,css-prop,--ion-col-breakpoint-sm-padding-bottom
+ion-col,css-prop,--ion-col-breakpoint-sm-padding-end
+ion-col,css-prop,--ion-col-breakpoint-sm-padding-start
+ion-col,css-prop,--ion-col-breakpoint-sm-padding-top
+ion-col,css-prop,--ion-col-breakpoint-xl-padding-bottom
+ion-col,css-prop,--ion-col-breakpoint-xl-padding-end
+ion-col,css-prop,--ion-col-breakpoint-xl-padding-start
+ion-col,css-prop,--ion-col-breakpoint-xl-padding-top
+ion-col,css-prop,--ion-col-breakpoint-xs-padding-bottom
+ion-col,css-prop,--ion-col-breakpoint-xs-padding-end
+ion-col,css-prop,--ion-col-breakpoint-xs-padding-start
+ion-col,css-prop,--ion-col-breakpoint-xs-padding-top
 
 ion-content,shadow
 ion-content,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
@@ -1043,19 +1054,32 @@ ion-gallery,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-grid,shadow
 ion-grid,prop,fixed,boolean,false,false,false
 ion-grid,prop,mode,"ios" | "md",undefined,false,false
-ion-grid,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-grid,css-prop,--ion-grid-padding
-ion-grid,css-prop,--ion-grid-padding-lg
-ion-grid,css-prop,--ion-grid-padding-md
-ion-grid,css-prop,--ion-grid-padding-sm
-ion-grid,css-prop,--ion-grid-padding-xl
-ion-grid,css-prop,--ion-grid-padding-xs
-ion-grid,css-prop,--ion-grid-width
-ion-grid,css-prop,--ion-grid-width-lg
-ion-grid,css-prop,--ion-grid-width-md
-ion-grid,css-prop,--ion-grid-width-sm
-ion-grid,css-prop,--ion-grid-width-xl
-ion-grid,css-prop,--ion-grid-width-xs
+ion-grid,css-prop,--ion-grid-breakpoint-lg-padding-bottom
+ion-grid,css-prop,--ion-grid-breakpoint-lg-padding-end
+ion-grid,css-prop,--ion-grid-breakpoint-lg-padding-start
+ion-grid,css-prop,--ion-grid-breakpoint-lg-padding-top
+ion-grid,css-prop,--ion-grid-breakpoint-lg-width
+ion-grid,css-prop,--ion-grid-breakpoint-md-padding-bottom
+ion-grid,css-prop,--ion-grid-breakpoint-md-padding-end
+ion-grid,css-prop,--ion-grid-breakpoint-md-padding-start
+ion-grid,css-prop,--ion-grid-breakpoint-md-padding-top
+ion-grid,css-prop,--ion-grid-breakpoint-md-width
+ion-grid,css-prop,--ion-grid-breakpoint-sm-padding-bottom
+ion-grid,css-prop,--ion-grid-breakpoint-sm-padding-end
+ion-grid,css-prop,--ion-grid-breakpoint-sm-padding-start
+ion-grid,css-prop,--ion-grid-breakpoint-sm-padding-top
+ion-grid,css-prop,--ion-grid-breakpoint-sm-width
+ion-grid,css-prop,--ion-grid-breakpoint-xl-padding-bottom
+ion-grid,css-prop,--ion-grid-breakpoint-xl-padding-end
+ion-grid,css-prop,--ion-grid-breakpoint-xl-padding-start
+ion-grid,css-prop,--ion-grid-breakpoint-xl-padding-top
+ion-grid,css-prop,--ion-grid-breakpoint-xl-width
+ion-grid,css-prop,--ion-grid-breakpoint-xs-padding-bottom
+ion-grid,css-prop,--ion-grid-breakpoint-xs-padding-end
+ion-grid,css-prop,--ion-grid-breakpoint-xs-padding-start
+ion-grid,css-prop,--ion-grid-breakpoint-xs-padding-top
+ion-grid,css-prop,--ion-grid-breakpoint-xs-width
+ion-grid,css-prop,--ion-grid-columns
 
 ion-header,none
 ion-header,prop,collapse,"condense" | "fade" | undefined,undefined,false,false
@@ -2255,8 +2279,7 @@ ion-router-outlet,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
 ion-row,shadow
 ion-row,prop,mode,"ios" | "md",undefined,false,false
-ion-row,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-row,css-prop,--ion-grid-gap
+ion-row,css-prop,--ion-row-gap
 
 ion-searchbar,scoped
 ion-searchbar,prop,animated,boolean,false,false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 23b33be9ec3..0e1bafc4319 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1043,10 +1043,6 @@ export namespace Components {
           * The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
          */
         "sizeXs"?: string;
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonContent {
         /**
@@ -1512,10 +1508,6 @@ export namespace Components {
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonHeader {
         /**
@@ -3463,7 +3455,7 @@ export namespace Components {
           * The mode determines the platform behaviors of the component.
           * @default getIonMode(this)
          */
-        "mode": "ios" | "md";
+        "mode": "md" | "ios";
         "setRouteId": (id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder) => Promise<RouteWrite>;
         "swipeHandler"?: SwipeGestureHandler;
         /**
@@ -3476,10 +3468,6 @@ export namespace Components {
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonSearchbar {
         /**
@@ -7062,10 +7050,6 @@ declare namespace LocalJSX {
           * The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
          */
         "sizeXs"?: string;
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonContent {
         /**
@@ -7520,10 +7504,6 @@ declare namespace LocalJSX {
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonHeader {
         /**
@@ -9511,7 +9491,7 @@ declare namespace LocalJSX {
           * The mode determines the platform behaviors of the component.
           * @default getIonMode(this)
          */
-        "mode"?: "ios" | "md";
+        "mode"?: "md" | "ios";
         "onIonNavDidChange"?: (event: IonRouterOutletCustomEvent<void>) => void;
         "onIonNavWillChange"?: (event: IonRouterOutletCustomEvent<void>) => void;
         "onIonNavWillLoad"?: (event: IonRouterOutletCustomEvent<void>) => void;
@@ -9526,10 +9506,6 @@ declare namespace LocalJSX {
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonSearchbar {
         /**
@@ -11229,7 +11205,7 @@ declare namespace LocalJSX {
         "target": string | undefined;
     }
     interface IonRouterOutletAttributes {
-        "mode": "ios" | "md";
+        "mode": "md" | "ios";
         "animated": boolean;
     }
     interface IonSearchbarAttributes {
diff --git a/core/src/components/action-sheet/test/translucent/action-sheet.e2e.ts-snapshots/action-sheet-translucent-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/translucent/action-sheet.e2e.ts-snapshots/action-sheet-translucent-ios-ltr-Mobile-Chrome-linux.png
index 28138808c3a..56e9941cb1e 100644
Binary files a/core/src/components/action-sheet/test/translucent/action-sheet.e2e.ts-snapshots/action-sheet-translucent-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/translucent/action-sheet.e2e.ts-snapshots/action-sheet-translucent-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/action-sheet/test/translucent/action-sheet.e2e.ts-snapshots/action-sheet-translucent-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/translucent/action-sheet.e2e.ts-snapshots/action-sheet-translucent-ios-ltr-Mobile-Firefox-linux.png
index f7a56d923a7..626dba67148 100644
Binary files a/core/src/components/action-sheet/test/translucent/action-sheet.e2e.ts-snapshots/action-sheet-translucent-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/translucent/action-sheet.e2e.ts-snapshots/action-sheet-translucent-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/action-sheet/test/translucent/action-sheet.e2e.ts-snapshots/action-sheet-translucent-ios-ltr-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/translucent/action-sheet.e2e.ts-snapshots/action-sheet-translucent-ios-ltr-Mobile-Safari-linux.png
index c5a575bfc19..69d462f2039 100644
Binary files a/core/src/components/action-sheet/test/translucent/action-sheet.e2e.ts-snapshots/action-sheet-translucent-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/translucent/action-sheet.e2e.ts-snapshots/action-sheet-translucent-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/action-sheet/test/translucent/index.html b/core/src/components/action-sheet/test/translucent/index.html
index cfae303e7e6..1eef4d3849a 100644
--- a/core/src/components/action-sheet/test/translucent/index.html
+++ b/core/src/components/action-sheet/test/translucent/index.html
@@ -14,10 +14,16 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
 
     <style>
-      f {
-        display: block;
-        width: 100%;
+      .color-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+      }
+
+      .color-block {
         height: 150px;
+
+        border: 5px solid transparent;
+        background-clip: padding-box;
       }
 
       .red {
@@ -77,19 +83,17 @@
         <button class="expand" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</button>
         <button class="expand" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</button>
 
-        <ion-grid>
-          <ion-row>
-            <ion-col size="4"><f class="red"></f></ion-col>
-            <ion-col size="4"><f class="green"></f></ion-col>
-            <ion-col size="4"><f class="blue"></f></ion-col>
-            <ion-col size="4"><f class="yellow"></f></ion-col>
-            <ion-col size="4"><f class="pink"></f></ion-col>
-            <ion-col size="4"><f class="purple"></f></ion-col>
-            <ion-col size="4"><f class="black"></f></ion-col>
-            <ion-col size="4"><f class="fuchsia"></f></ion-col>
-            <ion-col size="4"><f class="orange"></f></ion-col>
-          </ion-row>
-        </ion-grid>
+        <div class="color-grid">
+          <div class="color-block red"></div>
+          <div class="color-block green"></div>
+          <div class="color-block blue"></div>
+          <div class="color-block yellow"></div>
+          <div class="color-block pink"></div>
+          <div class="color-block purple"></div>
+          <div class="color-block black"></div>
+          <div class="color-block fuchsia"></div>
+          <div class="color-block orange"></div>
+        </div>
       </ion-content>
       <ion-action-sheet-controller></ion-action-sheet-controller>
     </ion-app>
diff --git a/core/src/components/col/col.interface.ts b/core/src/components/col/col.interface.ts
new file mode 100644
index 00000000000..57472fa7274
--- /dev/null
+++ b/core/src/components/col/col.interface.ts
@@ -0,0 +1,22 @@
+import type { IonPadding } from '../../themes/themes.interfaces';
+import { ION_GRID_BREAKPOINTS } from '../grid/grid.interface';
+
+export type IonColRecipe = {
+  breakpoint?: {
+    [K in IonColBreakpoint]?: {
+      padding?: IonPadding;
+    };
+  };
+};
+
+// TODO(FW-7285): Replace with global breakpoints
+export const ION_COL_BREAKPOINTS = ION_GRID_BREAKPOINTS;
+export type IonColBreakpoint = (typeof ION_COL_BREAKPOINTS)[number];
+
+export type IonColProperty = 'size' | 'order' | 'offset';
+
+export type IonColStyle = {
+  '--internal-col-margin'?: string;
+  '--internal-col-span'?: string;
+  order?: string;
+};
diff --git a/core/src/components/col/col.scss b/core/src/components/col/col.scss
index d1841262e0c..28de29f184c 100644
--- a/core/src/components/col/col.scss
+++ b/core/src/components/col/col.scss
@@ -1,27 +1,43 @@
-@import "./col.vars";
+@use "../../themes/mixins" as mixins;
+@use "../grid/grid.mixins" as grid;
+@use "./col.vars" as vars;
 
-// Column
+// Column: Common Styles
 // --------------------------------------------------
 
 :host {
   /**
-   * @prop --col-unit-size: The size of each Column unit.
+   * @prop --ion-col-breakpoint-xs-padding-top: Top padding on xs screens
+   * @prop --ion-col-breakpoint-xs-padding-end: End padding on xs screens
+   * @prop --ion-col-breakpoint-xs-padding-bottom: Bottom padding on xs screens
+   * @prop --ion-col-breakpoint-xs-padding-start: Start padding on xs screens
+   *
+   * @prop --ion-col-breakpoint-sm-padding-top: Top padding on sm screens
+   * @prop --ion-col-breakpoint-sm-padding-end: End padding on sm screens
+   * @prop --ion-col-breakpoint-sm-padding-bottom: Bottom padding on sm screens
+   * @prop --ion-col-breakpoint-sm-padding-start: Start padding on sm screens
+   *
+   * @prop --ion-col-breakpoint-md-padding-top: Top padding on md screens
+   * @prop --ion-col-breakpoint-md-padding-end: End padding on md screens
+   * @prop --ion-col-breakpoint-md-padding-bottom: Bottom padding on md screens
+   * @prop --ion-col-breakpoint-md-padding-start: Start padding on md screens
+   *
+   * @prop --ion-col-breakpoint-lg-padding-top: Top padding on lg screens
+   * @prop --ion-col-breakpoint-lg-padding-end: End padding on lg screens
+   * @prop --ion-col-breakpoint-lg-padding-bottom: Bottom padding on lg screens
+   * @prop --ion-col-breakpoint-lg-padding-start: Start padding on lg screens
+   *
+   * @prop --ion-col-breakpoint-xl-padding-top: Top padding on xl screens
+   * @prop --ion-col-breakpoint-xl-padding-end: End padding on xl screens
+   * @prop --ion-col-breakpoint-xl-padding-bottom: Bottom padding on xl screens
+   * @prop --ion-col-breakpoint-xl-padding-start: Start padding on xl screens
    */
-  --col-unit-size: calc(
-    (100% - (var(--ion-grid-columns, 12) - 1) * var(--ion-grid-gap, 0px)) / var(--ion-grid-columns, 12)
+  --internal-col-unit-size: calc(
+    (100% - (var(--ion-grid-columns, 12) - 1) * var(--ion-row-gap, 0px)) / var(--ion-grid-columns, 12)
   );
 
-  /**
-   * @prop --ion-grid-columns: The number of total Columns in the Grid
-   * @prop --ion-grid-column-padding: Padding for the Column
-   * @prop --ion-grid-column-padding-xs: Padding for the Column on xs screens and up
-   * @prop --ion-grid-column-padding-sm: Padding for the Column on sm screens and up
-   * @prop --ion-grid-column-padding-md: Padding for the Column on md screens and up
-   * @prop --ion-grid-column-padding-lg: Padding for the Column on lg screens and up
-   * @prop --ion-grid-column-padding-xl: Padding for the Column on xl screens and up
-   */
-  @include make-breakpoint-padding($grid-column-paddings);
-  @include margin(0);
+  @include grid.make-breakpoint-padding(vars.$grid-column-paddings);
+  @include mixins.margin(0);
 
   box-sizing: border-box;
 
@@ -34,48 +50,26 @@
   overflow: auto;
 }
 
-:host(.ion-grid-col-auto) {
+:host(.col-auto) {
   flex: 0 0 auto;
 }
 
-:host([class^="ion-grid-col--"]),
-:host([class*=" ion-grid-col--"]) {
+:host(.col-size) {
   flex: 0 0
-    calc(var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap, 0px));
+    calc(
+      var(--internal-col-span) * var(--internal-col-unit-size) + (var(--internal-col-span) - 1) *
+        var(--ion-row-gap, 0px)
+    );
 
   max-width: calc(
-    var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap, 0px)
+    var(--internal-col-span) * var(--internal-col-unit-size) + (var(--internal-col-span) - 1) * var(--ion-row-gap, 0px)
   );
 }
 
-:host([class^="ion-grid-offset-col--"]),
-:host([class*=" ion-grid-offset-col--"]) {
-  --margin-calc: calc(
-    var(--col-unit-size) * var(--ion-grid-col-margin) + (var(--ion-grid-gap, 0px) * var(--ion-grid-col-margin))
+:host(.col-offset) {
+  $margin-calc: calc(
+    var(--internal-col-unit-size) * var(--internal-col-margin) + (var(--ion-row-gap, 0px) * var(--internal-col-margin))
   );
 
-  @include margin-horizontal(var(--margin-calc), 0);
-}
-
-/* 
- * While the number of columns can be customized, we generate
- * a default set of classes for 12 columns. In the future, this
- * will be configurable at build time as Ionic becomes more modular.
- * For now, 12 columns is a practical default. Developers who need
- * more columns can override or extend these styles as needed.
- */
-$grid-col-number: 12;
-
-@for $i from 1 through $grid-col-number {
-  :host(.ion-grid-col--#{$i}) {
-    --ion-grid-col-span: #{$i};
-  }
-
-  :host(.ion-grid-order-col--#{$i}) {
-    order: #{$i};
-  }
-
-  :host(.ion-grid-offset-col--#{$i}) {
-    --ion-grid-col-margin: #{$i};
-  }
+  @include mixins.margin-horizontal($margin-calc, 0);
 }
diff --git a/core/src/components/col/col.tsx b/core/src/components/col/col.tsx
index e929f4ed756..7a544f213e2 100644
--- a/core/src/components/col/col.tsx
+++ b/core/src/components/col/col.tsx
@@ -3,15 +3,21 @@ import { Component, Element, Host, Listen, Prop, forceUpdate, h } from '@stencil
 import { printIonWarning } from '@utils/logging';
 import { matchBreakpoint } from '@utils/media';
 
-import { getIonTheme } from '../../global/ionic-global';
+import type { IonColProperty, IonColStyle } from './col.interface';
+import { ION_COL_BREAKPOINTS } from './col.interface';
 
-// TODO(FW-7285): Replace with global breakpoints
-// eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
+const BREAKPOINTS = ['', ...ION_COL_BREAKPOINTS] as const;
+
+/**
+ * How long to wait (in ms) after the last `resize` event before re-rendering.
+ * `resize` fires rapidly while a window is dragged, so instead of re-rendering
+ * on every event we wait for it to settle and render once. 100ms is short
+ * enough to feel instant but long enough to batch the burst.
+ */
+const RESIZE_DEBOUNCE = 100;
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 @Component({
   tag: 'ion-col',
@@ -19,6 +25,8 @@ const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
   shadow: true,
 })
 export class Col implements ComponentInterface {
+  private resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+
   @Element() el!: HTMLIonColElement;
   /**
    * The amount to offset the column, in terms of how many columns it should shift to the end
@@ -92,72 +100,84 @@ export class Col implements ComponentInterface {
    */
   @Prop() orderXl?: string;
 
+  // TODO(FW-7557): Remove this in a major release.
   /**
    * The amount to pull the column, in terms of how many columns it should shift to the start of
    * the total available.
    * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
    */
   @Prop() pull?: string;
+  // TODO(FW-7557): Remove this in a major release.
   /**
    * The amount to pull the column for xs screens, in terms of how many columns it should shift
    * to the start of the total available.
    * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
    */
   @Prop() pullXs?: string;
+  // TODO(FW-7557): Remove this in a major release.
   /**
    * The amount to pull the column for sm screens, in terms of how many columns it should shift
    * to the start of the total available.
    * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
    */
   @Prop() pullSm?: string;
+  // TODO(FW-7557): Remove this in a major release.
   /**
    * The amount to pull the column for md screens, in terms of how many columns it should shift
    * to the start of the total available.
    * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
    */
   @Prop() pullMd?: string;
+  // TODO(FW-7557): Remove this in a major release.
   /**
    * The amount to pull the column for lg screens, in terms of how many columns it should shift
    * to the start of the total available.
    * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
    */
   @Prop() pullLg?: string;
+  // TODO(FW-7557): Remove this in a major release.
   /**
    * The amount to pull the column for xl screens, in terms of how many columns it should shift
    * to the start of the total available.
    * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
    */
   @Prop() pullXl?: string;
+  // TODO(FW-7557): Remove this in a major release.
   /**
    * The amount to push the column, in terms of how many columns it should shift to the end
    * of the total available.
    * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
    */
   @Prop() push?: string;
+  // TODO(FW-7557): Remove this in a major release.
   /**
    * The amount to push the column for xs screens, in terms of how many columns it should shift
    * to the end of the total available.
    * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
    */
   @Prop() pushXs?: string;
+  // TODO(FW-7557): Remove this in a major release.
   /**
    * The amount to push the column for sm screens, in terms of how many columns it should shift
    * to the end of the total available.
    * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
    */
   @Prop() pushSm?: string;
+  // TODO(FW-7557): Remove this in a major release.
   /**
    * The amount to push the column for md screens, in terms of how many columns it should shift
    * to the end of the total available.
    * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
    */
   @Prop() pushMd?: string;
+  // TODO(FW-7557): Remove this in a major release.
   /**
    * The amount to push the column for lg screens, in terms of how many columns it should shift
    * to the end of the total available.
    * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
    */
   @Prop() pushLg?: string;
+  // TODO(FW-7557): Remove this in a major release.
   /**
    * The amount to push the column for xl screens, in terms of how many columns it should shift
    * to the end of the total available.
@@ -203,20 +223,36 @@ export class Col implements ComponentInterface {
 
   @Listen('resize', { target: 'window' })
   onResize() {
-    forceUpdate(this);
+    if (this.resizeTimeout) {
+      clearTimeout(this.resizeTimeout);
+      this.resizeTimeout = null;
+    }
+
+    this.resizeTimeout = setTimeout(() => {
+      forceUpdate(this);
+    }, RESIZE_DEBOUNCE);
+  }
+
+  disconnectedCallback() {
+    if (this.resizeTimeout) {
+      clearTimeout(this.resizeTimeout);
+      this.resizeTimeout = null;
+    }
   }
 
   // Loop through all of the breakpoints to see if the media query
   // matches and grab the column value from the relevant prop if so
-  private getColumns(property: string) {
-    let matched;
+  private getColumns(property: IonColProperty): string | undefined {
+    let matched: string | undefined;
 
     for (const breakpoint of BREAKPOINTS) {
       const matches = matchBreakpoint(breakpoint);
 
       // Grab the value of the property, if it exists and our
       // media query matches we return the value
-      const columns = (this as any)[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];
+      const columns = this[(property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)) as keyof this] as
+        | string
+        | undefined;
 
       if (matches && columns !== undefined) {
         matched = columns;
@@ -228,40 +264,48 @@ export class Col implements ComponentInterface {
     return matched;
   }
 
-  private getStyleClass(property: string, className: string, acceptsAuto = false): string | undefined {
+  private getColumnValue(property: IonColProperty): number | undefined {
     const colPropertyValue = this.getColumns(property);
 
-    // If size wasn't set for any breakpoint
-    // or if the user set the size without a value
-    // it means we need to stick with the default and return
-    // e.g. <ion-col size-md>
+    /**
+     * Return early when no value matched any breakpoint, or when the
+     * matched value is an empty string. The empty-string case comes
+     * from a value-less HTML attribute (e.g. `<ion-col size-md>`) —
+     * the attribute is present but carries no width, so the column
+     * falls back to the default flex layout.
+     */
     if (!colPropertyValue || colPropertyValue === '') {
       return;
     }
 
-    if (acceptsAuto && colPropertyValue === 'auto') {
-      return 'ion-grid-col-auto';
-    }
-
-    const valueNumber = parseInt(colPropertyValue);
+    const valueNumber = parseInt(colPropertyValue, 10);
 
-    if (isNaN(valueNumber)) {
-      return;
-    }
-
-    return `${className}-col--${valueNumber}`;
+    return isNaN(valueNumber) ? undefined : valueNumber;
   }
 
-  private getSizeClass(): string | undefined {
-    return this.getStyleClass('size', 'ion-grid', true);
-  }
+  /**
+   * Builds the inline custom properties that drive the token based calc()
+   * in the styles.
+   *
+   * @param size The number of columns the column should span, or `undefined` for default flex.
+   * @param order The flex order position of the column.
+   * @param offset The number of columns to offset (margin) the column by.
+   * @return An object containing the custom properties to apply to the column's style.
+   */
+  private getColumnStyle(size: number | undefined, order: number | undefined, offset: number | undefined): IonColStyle {
+    const style: IonColStyle = {};
 
-  private getOrderClass(): string | undefined {
-    return this.getStyleClass('order', 'ion-grid-order');
-  }
+    if (size !== undefined) {
+      style['--internal-col-span'] = `${size}`;
+    }
+    if (order !== undefined) {
+      style['order'] = `${order}`;
+    }
+    if (offset !== undefined) {
+      style['--internal-col-margin'] = `${offset}`;
+    }
 
-  private getOffsetClass(): string | undefined {
-    return this.getStyleClass('offset', 'ion-grid-offset');
+    return style;
   }
 
   componentDidLoad() {
@@ -287,20 +331,19 @@ export class Col implements ComponentInterface {
   }
 
   render() {
-    const theme = getIonTheme(this);
-
-    const colSize = this.getSizeClass();
-    const colOrder = this.getOrderClass();
-    const colOffset = this.getOffsetClass();
+    const size = this.getColumnValue('size');
+    const order = this.getColumnValue('order');
+    const offset = this.getColumnValue('offset');
+    const isAutoSize = this.getColumns('size') === 'auto';
 
     return (
       <Host
         class={{
-          [theme]: true,
-          [`${colSize}`]: colSize !== undefined,
-          [`${colOrder}`]: colOrder !== undefined,
-          [`${colOffset}`]: colOffset !== undefined,
+          'col-size': size !== undefined,
+          'col-auto': isAutoSize,
+          'col-offset': offset !== undefined,
         }}
+        style={this.getColumnStyle(size, order, offset)}
       >
         <slot></slot>
       </Host>
diff --git a/core/src/components/col/col.vars.scss b/core/src/components/col/col.vars.scss
index 0a7f1ee37cd..b6a004e29ad 100644
--- a/core/src/components/col/col.vars.scss
+++ b/core/src/components/col/col.vars.scss
@@ -1,17 +1,42 @@
-@import "../../themes/native/native.globals";
-@import "../grid/grid.mixins";
-
 // Grid Column
 // --------------------------------------------------
 
-/// @prop - The padding for the grid column
-$grid-column-padding: var(--ion-grid-column-padding, 5px);
-
-/// @prop - The padding for the column at different breakpoints
+/// @prop - Per-breakpoint, per-side padding values
+///
+/// `.ion-padding` / `.ion-no-padding` utility classes set `--padding-*`
+/// directly on the host, so we must read `--padding-*` first and only fall
+/// back to the per-breakpoint, per-side recipe token. When the utility is
+/// applied on a parent (e.g. `<ion-grid class="ion-no-padding">`), the
+/// `--padding-*` vars cascade-inherit into the slotted col descendants.
 $grid-column-paddings: (
-  xs: var(--ion-grid-column-padding-xs, $grid-column-padding),
-  sm: var(--ion-grid-column-padding-sm, $grid-column-padding),
-  md: var(--ion-grid-column-padding-md, $grid-column-padding),
-  lg: var(--ion-grid-column-padding-lg, $grid-column-padding),
-  xl: var(--ion-grid-column-padding-xl, $grid-column-padding),
+  xs: (
+    top: var(--padding-top, var(--ion-col-breakpoint-xs-padding-top)),
+    end: var(--padding-end, var(--ion-col-breakpoint-xs-padding-end)),
+    bottom: var(--padding-bottom, var(--ion-col-breakpoint-xs-padding-bottom)),
+    start: var(--padding-start, var(--ion-col-breakpoint-xs-padding-start)),
+  ),
+  sm: (
+    top: var(--padding-top, var(--ion-col-breakpoint-sm-padding-top)),
+    end: var(--padding-end, var(--ion-col-breakpoint-sm-padding-end)),
+    bottom: var(--padding-bottom, var(--ion-col-breakpoint-sm-padding-bottom)),
+    start: var(--padding-start, var(--ion-col-breakpoint-sm-padding-start)),
+  ),
+  md: (
+    top: var(--padding-top, var(--ion-col-breakpoint-md-padding-top)),
+    end: var(--padding-end, var(--ion-col-breakpoint-md-padding-end)),
+    bottom: var(--padding-bottom, var(--ion-col-breakpoint-md-padding-bottom)),
+    start: var(--padding-start, var(--ion-col-breakpoint-md-padding-start)),
+  ),
+  lg: (
+    top: var(--padding-top, var(--ion-col-breakpoint-lg-padding-top)),
+    end: var(--padding-end, var(--ion-col-breakpoint-lg-padding-end)),
+    bottom: var(--padding-bottom, var(--ion-col-breakpoint-lg-padding-bottom)),
+    start: var(--padding-start, var(--ion-col-breakpoint-lg-padding-start)),
+  ),
+  xl: (
+    top: var(--padding-top, var(--ion-col-breakpoint-xl-padding-top)),
+    end: var(--padding-end, var(--ion-col-breakpoint-xl-padding-end)),
+    bottom: var(--padding-bottom, var(--ion-col-breakpoint-xl-padding-bottom)),
+    start: var(--padding-start, var(--ion-col-breakpoint-xl-padding-start)),
+  ),
 );
diff --git a/core/src/components/col/test/basic/col.e2e.ts b/core/src/components/col/test/basic/col.e2e.ts
new file mode 100644
index 00000000000..ed8e666750a
--- /dev/null
+++ b/core/src/components/col/test/basic/col.e2e.ts
@@ -0,0 +1,127 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('col: basic'), () => {
+    test('size="6" in a default 12-col grid fills half the grid content width', async ({ page }) => {
+      await page.setContent(
+        `
+          <div style="width: 600px;">
+            <ion-grid>
+              <ion-row>
+                <ion-col size="6"></ion-col>
+              </ion-row>
+            </ion-grid>
+          </div>
+        `,
+        config
+      );
+
+      const { contentWidth, colWidth } = await page.locator('ion-grid').evaluate((grid) => {
+        const styles = getComputedStyle(grid);
+        const col = grid.querySelector('ion-col')!;
+        return {
+          contentWidth: grid.clientWidth - parseFloat(styles.paddingLeft) - parseFloat(styles.paddingRight),
+          colWidth: col.getBoundingClientRect().width,
+        };
+      });
+
+      // 6 of 12 columns → col fills 50% of the grid's content area.
+      // 1px tolerance for sub-pixel rounding.
+      expect(colWidth).toBeGreaterThanOrEqual(contentWidth * 0.5 - 1);
+      expect(colWidth).toBeLessThanOrEqual(contentWidth * 0.5 + 1);
+    });
+
+    test('overriding --ion-grid-columns cascades into col widths', async ({ page }) => {
+      await page.setContent(
+        `
+          <div style="width: 600px;">
+            <ion-grid style="--ion-grid-columns: 6;">
+              <ion-row>
+                <ion-col size="6"></ion-col>
+              </ion-row>
+            </ion-grid>
+          </div>
+        `,
+        config
+      );
+
+      const { contentWidth, colWidth } = await page.locator('ion-grid').evaluate((grid) => {
+        const styles = getComputedStyle(grid);
+        const col = grid.querySelector('ion-col')!;
+        return {
+          contentWidth: grid.clientWidth - parseFloat(styles.paddingLeft) - parseFloat(styles.paddingRight),
+          colWidth: col.getBoundingClientRect().width,
+        };
+      });
+
+      // With --ion-grid-columns: 6 and size=6, col fills 6/6 = 100% of
+      // the grid's content area. 1px tolerance for sub-pixel rounding.
+      expect(colWidth).toBeGreaterThanOrEqual(contentWidth - 1);
+      expect(colWidth).toBeLessThanOrEqual(contentWidth + 1);
+    });
+
+    test('--ion-row-gap subtracts from col widths in the cascade', async ({ page }) => {
+      await page.setContent(
+        `
+          <div style="width: 600px;">
+            <ion-grid>
+              <ion-row style="--ion-row-gap: 20px;">
+                <ion-col size="6"></ion-col>
+                <ion-col size="6"></ion-col>
+              </ion-row>
+            </ion-grid>
+          </div>
+        `,
+        config
+      );
+
+      const { rowWidth, colWidth } = await page.locator('ion-row').evaluate((row) => {
+        const col = row.querySelector('ion-col')!;
+        return {
+          rowWidth: row.clientWidth,
+          colWidth: col.getBoundingClientRect().width,
+        };
+      });
+
+      // Two size=6 cols share one 20px gap, so each col fills (rowWidth - 20) / 2.
+      // 1px tolerance for sub-pixel rounding.
+      const expected = (rowWidth - 20) / 2;
+      expect(colWidth).toBeGreaterThanOrEqual(expected - 1);
+      expect(colWidth).toBeLessThanOrEqual(expected + 1);
+    });
+
+    test('offset margin equals offset_count x col-unit-size', async ({ page }) => {
+      await page.setContent(
+        `
+          <div style="width: 600px;">
+            <ion-grid>
+              <ion-row>
+                <ion-col size="6" offset="3"></ion-col>
+              </ion-row>
+            </ion-grid>
+          </div>
+        `,
+        config
+      );
+
+      const { width, marginInlineStart } = await page.locator('ion-col').evaluate((el) => {
+        const rect = el.getBoundingClientRect();
+        const styles = getComputedStyle(el);
+        return {
+          width: rect.width,
+          marginInlineStart: parseFloat(styles.marginInlineStart),
+        };
+      });
+
+      // With size=6 and offset=3 in a 12-col grid (gap=0):
+      //   col_width = 6 * unit_size = 50% of content area
+      //   margin    = 3 * unit_size = 25% of content area
+      //   ratio     = margin / width = (3/12) / (6/12) = 0.5
+      expect(marginInlineStart / width).toBeCloseTo(0.5, 1);
+    });
+  });
+});
diff --git a/core/src/components/col/test/col.spec.ts b/core/src/components/col/test/col.spec.ts
new file mode 100644
index 00000000000..8bdbfa0d5e3
--- /dev/null
+++ b/core/src/components/col/test/col.spec.ts
@@ -0,0 +1,119 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Col } from '../col';
+
+describe('ion-col: class', () => {
+  it('sets --internal-col-span for size="N"', async () => {
+    const page = await newSpecPage({
+      components: [Col],
+      html: `<ion-col size="3"></ion-col>`,
+    });
+
+    const col = page.body.querySelector('ion-col')!;
+    expect(col.classList.contains('col-size')).toBe(true);
+    expect(col.style.getPropertyValue('--internal-col-span')).toBe('3');
+  });
+
+  it('applies col-auto for size="auto"', async () => {
+    const page = await newSpecPage({
+      components: [Col],
+      html: `<ion-col size="auto"></ion-col>`,
+    });
+
+    const col = page.body.querySelector('ion-col')!;
+    expect(col.classList.contains('col-auto')).toBe(true);
+  });
+
+  it('applies no sizing class for a valueless size attribute', async () => {
+    const page = await newSpecPage({
+      components: [Col],
+      html: `<ion-col size></ion-col>`,
+    });
+
+    const col = page.body.querySelector('ion-col')!;
+    const sizeClasses = Array.from(col.classList).filter((c) => c.startsWith('col-'));
+    expect(sizeClasses).toEqual([]);
+  });
+
+  it('sets --internal-col-margin for offset="N"', async () => {
+    const page = await newSpecPage({
+      components: [Col],
+      html: `<ion-col offset="2"></ion-col>`,
+    });
+
+    const col = page.body.querySelector('ion-col')!;
+    expect(col.classList.contains('col-offset')).toBe(true);
+    expect(col.style.getPropertyValue('--internal-col-margin')).toBe('2');
+  });
+
+  it('sets the order style for order="N"', async () => {
+    const page = await newSpecPage({
+      components: [Col],
+      html: `<ion-col order="5"></ion-col>`,
+    });
+
+    const col = page.body.querySelector('ion-col')!;
+    expect(col.style.order).toBe('5');
+  });
+
+  it('applies no sizing class for a non-numeric size value', async () => {
+    const page = await newSpecPage({
+      components: [Col],
+      html: `<ion-col size="banana"></ion-col>`,
+    });
+
+    const col = page.body.querySelector('ion-col')!;
+    const sizeClasses = Array.from(col.classList).filter((c) => c.startsWith('col-'));
+    expect(sizeClasses).toEqual([]);
+  });
+});
+
+// TODO(FW-7557): Remove this when the push/pull props are removed.
+describe('ion-col: deprecated push/pull props', () => {
+  let warnSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    warnSpy = jest.spyOn(console, 'warn').mockImplementation();
+  });
+
+  afterEach(() => {
+    warnSpy.mockRestore();
+  });
+
+  it('warns when push is set', async () => {
+    await newSpecPage({
+      components: [Col],
+      html: `<ion-col push="3"></ion-col>`,
+    });
+
+    expect(warnSpy).toHaveBeenCalled();
+    expect(warnSpy.mock.calls[0][0]).toEqual(expect.stringContaining('pull and push properties are deprecated'));
+  });
+
+  it('warns when pull is set', async () => {
+    await newSpecPage({
+      components: [Col],
+      html: `<ion-col pull="3"></ion-col>`,
+    });
+
+    expect(warnSpy).toHaveBeenCalled();
+  });
+
+  it('warns when a breakpoint-suffixed push variant is set', async () => {
+    await newSpecPage({
+      components: [Col],
+      html: `<ion-col push-md="3"></ion-col>`,
+    });
+
+    expect(warnSpy).toHaveBeenCalled();
+  });
+
+  it('does not warn when only non-deprecated props are set', async () => {
+    await newSpecPage({
+      components: [Col],
+      html: `<ion-col size="3"></ion-col>`,
+    });
+
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+});
diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index 07ca5602554..9ed7f69beb2 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -12,6 +12,14 @@ import type { Color, Mode } from '../../interface';
 
 import type { ScrollBaseDetail, ScrollDetail } from './content.interfaces';
 
+/**
+ * How long to wait (in ms) after the last `resize` event before recalculating.
+ * `resize` fires rapidly while a window is dragged, so we wait for it to settle
+ * and recalculate once instead of on every event. 100ms is short enough to feel
+ * instant but long enough to batch the burst.
+ */
+const RESIZE_DEBOUNCE = 100;
+
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
  *
@@ -234,7 +242,7 @@ export class Content implements ComponentInterface {
       }
 
       this.resize();
-    }, 100);
+    }, RESIZE_DEBOUNCE);
   }
 
   private shouldForceOverscroll(mode: Mode) {
diff --git a/core/src/components/fab/test/translucent/index.html b/core/src/components/fab/test/translucent/index.html
index 57d3f57a35a..24bc97fb8ad 100644
--- a/core/src/components/fab/test/translucent/index.html
+++ b/core/src/components/fab/test/translucent/index.html
@@ -23,18 +23,16 @@
       </ion-header>
 
       <ion-content fullscreen>
-        <ion-grid>
-          <ion-row>
-            <ion-col size="6"><f class="red"></f></ion-col>
-            <ion-col size="6"><f class="green"></f></ion-col>
-            <ion-col size="6"><f class="blue"></f></ion-col>
-            <ion-col size="6"><f class="yellow"></f></ion-col>
-            <ion-col size="6"><f class="pink"></f></ion-col>
-            <ion-col size="6"><f class="purple"></f></ion-col>
-            <ion-col size="6"><f class="black"></f></ion-col>
-            <ion-col size="6"><f class="orange"></f></ion-col>
-          </ion-row>
-        </ion-grid>
+        <div class="color-grid">
+          <div class="color-block red"></div>
+          <div class="color-block green"></div>
+          <div class="color-block blue"></div>
+          <div class="color-block yellow"></div>
+          <div class="color-block pink"></div>
+          <div class="color-block purple"></div>
+          <div class="color-block black"></div>
+          <div class="color-block orange"></div>
+        </div>
 
         <ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
           <ion-fab-button translucent size="small" class="e2eFabTopRight">
@@ -108,13 +106,15 @@
       </ion-footer>
 
       <style>
-        f {
-          display: block;
-          background: blue;
+        .color-grid {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          gap: 10px;
+          padding: 30px 10px;
+        }
 
-          width: 100%;
+        .color-block {
           height: 200px;
-          margin: 20px auto;
         }
 
         .red {
diff --git a/core/src/components/grid/grid.interface.ts b/core/src/components/grid/grid.interface.ts
new file mode 100644
index 00000000000..ce34a346902
--- /dev/null
+++ b/core/src/components/grid/grid.interface.ts
@@ -0,0 +1,16 @@
+import type { IonPadding } from '../../themes/themes.interfaces';
+
+export type IonGridRecipe = {
+  breakpoint?: {
+    [K in IonGridBreakpoint]?: {
+      padding?: IonPadding;
+      width?: string;
+    };
+  };
+
+  columns?: number;
+};
+
+// TODO(FW-7285): Replace with global breakpoints
+export const ION_GRID_BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+export type IonGridBreakpoint = (typeof ION_GRID_BREAKPOINTS)[number];
diff --git a/core/src/components/grid/grid.mixins.scss b/core/src/components/grid/grid.mixins.scss
index d4e779b703e..c657396b444 100644
--- a/core/src/components/grid/grid.mixins.scss
+++ b/core/src/components/grid/grid.mixins.scss
@@ -1,5 +1,6 @@
-@import "../../themes/native/native.globals";
-@import "../../themes/mixins";
+@use "sass:map";
+@use "../../themes/common.globals" as globals;
+@use "../../themes/mixins" as mixins;
 
 // Responsive Mixins
 // --------------------------------------------------
@@ -7,9 +8,9 @@
 // Creates a fixed width for the grid based on the screen size
 // ---------------------------------------------------------------------------------
 
-@mixin make-grid-widths($widths: $grid-widths, $breakpoints: $screen-breakpoints) {
+@mixin make-grid-widths($widths, $breakpoints: globals.$screen-breakpoints) {
   @each $breakpoint, $width in $widths {
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
+    @include mixins.media-breakpoint-up($breakpoint, $breakpoints) {
       width: $width;
     }
   }
@@ -21,11 +22,16 @@
 // ---------------------------------------------------------------------------------
 
 @mixin make-breakpoint-padding($paddings) {
-  @each $breakpoint in map-keys($paddings) {
-    @include media-breakpoint-up($breakpoint) {
-      $padding: map-get($paddings, $breakpoint);
+  @each $breakpoint in map.keys($paddings) {
+    @include mixins.media-breakpoint-up($breakpoint, globals.$screen-breakpoints) {
+      $padding: map.get($paddings, $breakpoint);
 
-      @include padding($padding);
+      @include mixins.padding(
+        map.get($padding, top),
+        map.get($padding, end),
+        map.get($padding, bottom),
+        map.get($padding, start)
+      );
     }
   }
 }
diff --git a/core/src/components/grid/grid.scss b/core/src/components/grid/grid.scss
index 97120021df8..3a9d4d172b9 100644
--- a/core/src/components/grid/grid.scss
+++ b/core/src/components/grid/grid.scss
@@ -1,49 +1,57 @@
-@import "./grid.vars";
+@use "../../themes/mixins" as mixins;
+@use "./grid.mixins" as grid;
+@use "./grid.vars" as vars;
 
-// Grid
+// Grid: Common Styles
 // --------------------------------------------------
 
 :host {
   /**
-   * @prop --ion-grid-padding: Padding for the Grid
-   * @prop --ion-grid-padding-xs: Padding for the Grid on xs screens
-   * @prop --ion-grid-padding-sm: Padding for the Grid on sm screens
-   * @prop --ion-grid-padding-md: Padding for the Grid on md screens
-   * @prop --ion-grid-padding-lg: Padding for the Grid on lg screens
-   * @prop --ion-grid-padding-xl: Padding for the Grid on xl screens
+   * @prop --ion-grid-columns: The number of total columns in the grid
    *
-   * @prop --ion-grid-width: Width of the fixed Grid
-   * @prop --ion-grid-width-xs: Width of the fixed Grid on xs screens
-   * @prop --ion-grid-width-sm: Width of the fixed Grid on sm screens
-   * @prop --ion-grid-width-md: Width of the fixed Grid on md screens
-   * @prop --ion-grid-width-lg: Width of the fixed Grid on lg screens
-   * @prop --ion-grid-width-xl: Width of the fixed Grid on xl screens
+   * @prop --ion-grid-breakpoint-xs-padding-top: Top padding on xs screens
+   * @prop --ion-grid-breakpoint-xs-padding-end: End padding on xs screens
+   * @prop --ion-grid-breakpoint-xs-padding-bottom: Bottom padding on xs screens
+   * @prop --ion-grid-breakpoint-xs-padding-start: Start padding on xs screens
+   *
+   * @prop --ion-grid-breakpoint-sm-padding-top: Top padding on sm screens
+   * @prop --ion-grid-breakpoint-sm-padding-end: End padding on sm screens
+   * @prop --ion-grid-breakpoint-sm-padding-bottom: Bottom padding on sm screens
+   * @prop --ion-grid-breakpoint-sm-padding-start: Start padding on sm screens
+   *
+   * @prop --ion-grid-breakpoint-md-padding-top: Top padding on md screens
+   * @prop --ion-grid-breakpoint-md-padding-end: End padding on md screens
+   * @prop --ion-grid-breakpoint-md-padding-bottom: Bottom padding on md screens
+   * @prop --ion-grid-breakpoint-md-padding-start: Start padding on md screens
+   *
+   * @prop --ion-grid-breakpoint-lg-padding-top: Top padding on lg screens
+   * @prop --ion-grid-breakpoint-lg-padding-end: End padding on lg screens
+   * @prop --ion-grid-breakpoint-lg-padding-bottom: Bottom padding on lg screens
+   * @prop --ion-grid-breakpoint-lg-padding-start: Start padding on lg screens
+   *
+   * @prop --ion-grid-breakpoint-xl-padding-top: Top padding on xl screens
+   * @prop --ion-grid-breakpoint-xl-padding-end: End padding on xl screens
+   * @prop --ion-grid-breakpoint-xl-padding-bottom: Bottom padding on xl screens
+   * @prop --ion-grid-breakpoint-xl-padding-start: Start padding on xl screens
+   *
+   * @prop --ion-grid-breakpoint-xs-width: Width of the fixed grid on xs screens
+   * @prop --ion-grid-breakpoint-sm-width: Width of the fixed grid on sm screens
+   * @prop --ion-grid-breakpoint-md-width: Width of the fixed grid on md screens
+   * @prop --ion-grid-breakpoint-lg-width: Width of the fixed grid on lg screens
+   * @prop --ion-grid-breakpoint-xl-width: Width of the fixed grid on xl screens
    */
 
-  @include make-breakpoint-padding($grid-paddings);
-  @include margin-horizontal(auto);
+  @include grid.make-breakpoint-padding(vars.$grid-paddings);
 
   display: block;
-
-  flex: 1;
 }
 
 // Fixed Grid
 // --------------------------------------------------
 
 :host(.grid-fixed) {
-  @include make-grid-widths();
-}
+  @include mixins.margin-horizontal(auto);
+  @include grid.make-grid-widths(vars.$grid-widths);
 
-// Grid Padding
-// --------------------------------------------------
-
-// Remove the padding from grid and all immediate children columns
-:host(.ion-no-padding) {
-  --ion-grid-column-padding: 0;
-  --ion-grid-column-padding-xs: 0;
-  --ion-grid-column-padding-sm: 0;
-  --ion-grid-column-padding-md: 0;
-  --ion-grid-column-padding-lg: 0;
-  --ion-grid-column-padding-xl: 0;
+  flex: 1;
 }
diff --git a/core/src/components/grid/grid.tsx b/core/src/components/grid/grid.tsx
index 4c95965d459..cf854a3dc31 100644
--- a/core/src/components/grid/grid.tsx
+++ b/core/src/components/grid/grid.tsx
@@ -1,11 +1,8 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 
-import { getIonTheme } from '../../global/ionic-global';
-
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 @Component({
   tag: 'ion-grid',
@@ -19,11 +16,9 @@ export class Grid implements ComponentInterface {
   @Prop() fixed = false;
 
   render() {
-    const theme = getIonTheme(this);
     return (
       <Host
         class={{
-          [theme]: true,
           'grid-fixed': this.fixed,
         }}
       >
diff --git a/core/src/components/grid/grid.vars.scss b/core/src/components/grid/grid.vars.scss
index ca3a0fad8c0..fd4bb710e60 100644
--- a/core/src/components/grid/grid.vars.scss
+++ b/core/src/components/grid/grid.vars.scss
@@ -1,26 +1,45 @@
-@import "../../themes/native/native.globals";
-@import "./grid.mixins";
-
 // Grid
 // --------------------------------------------------
 
-/// @prop - The padding for the grid
-$grid-padding: var(--ion-grid-padding, 5px);
-
-/// @prop - The padding for the grid at different breakpoints
+/// @prop - Per-breakpoint, per-side padding values
 $grid-paddings: (
-  xs: var(--ion-grid-padding-xs, $grid-padding),
-  sm: var(--ion-grid-padding-sm, $grid-padding),
-  md: var(--ion-grid-padding-md, $grid-padding),
-  lg: var(--ion-grid-padding-lg, $grid-padding),
-  xl: var(--ion-grid-padding-xl, $grid-padding),
+  xs: (
+    top: var(--ion-grid-breakpoint-xs-padding-top),
+    end: var(--ion-grid-breakpoint-xs-padding-end),
+    bottom: var(--ion-grid-breakpoint-xs-padding-bottom),
+    start: var(--ion-grid-breakpoint-xs-padding-start),
+  ),
+  sm: (
+    top: var(--ion-grid-breakpoint-sm-padding-top),
+    end: var(--ion-grid-breakpoint-sm-padding-end),
+    bottom: var(--ion-grid-breakpoint-sm-padding-bottom),
+    start: var(--ion-grid-breakpoint-sm-padding-start),
+  ),
+  md: (
+    top: var(--ion-grid-breakpoint-md-padding-top),
+    end: var(--ion-grid-breakpoint-md-padding-end),
+    bottom: var(--ion-grid-breakpoint-md-padding-bottom),
+    start: var(--ion-grid-breakpoint-md-padding-start),
+  ),
+  lg: (
+    top: var(--ion-grid-breakpoint-lg-padding-top),
+    end: var(--ion-grid-breakpoint-lg-padding-end),
+    bottom: var(--ion-grid-breakpoint-lg-padding-bottom),
+    start: var(--ion-grid-breakpoint-lg-padding-start),
+  ),
+  xl: (
+    top: var(--ion-grid-breakpoint-xl-padding-top),
+    end: var(--ion-grid-breakpoint-xl-padding-end),
+    bottom: var(--ion-grid-breakpoint-xl-padding-bottom),
+    start: var(--ion-grid-breakpoint-xl-padding-start),
+  ),
 );
 
-/// @prop - Width of the grid for different screen sizes when fixed is enabled
+/// @prop - Per-breakpoint fixed grid width values
 $grid-widths: (
-  xs: var(--ion-grid-width-xs, var(--ion-grid-width, 100%)),
-  sm: var(--ion-grid-width-sm, var(--ion-grid-width, 540px)),
-  md: var(--ion-grid-width-md, var(--ion-grid-width, 720px)),
-  lg: var(--ion-grid-width-lg, var(--ion-grid-width, 960px)),
-  xl: var(--ion-grid-width-xl, var(--ion-grid-width, 1140px)),
+  xs: var(--ion-grid-breakpoint-xs-width),
+  sm: var(--ion-grid-breakpoint-sm-width),
+  md: var(--ion-grid-breakpoint-md-width),
+  lg: var(--ion-grid-breakpoint-lg-width),
+  xl: var(--ion-grid-breakpoint-xl-width),
 );
diff --git a/core/src/components/grid/test/basic/grid.e2e.ts b/core/src/components/grid/test/basic/grid.e2e.ts
index 9b079b86c62..81f25f98269 100644
--- a/core/src/components/grid/test/basic/grid.e2e.ts
+++ b/core/src/components/grid/test/basic/grid.e2e.ts
@@ -2,16 +2,152 @@ import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
 /**
- * ion-grid does not have different styling per-mode
+ * This behavior does not vary across modes.
  */
 configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('grid: basic'), () => {
-    test('should not have visual regressions', async ({ page }) => {
-      await page.goto(`/src/components/grid/test/basic`, config);
+    test('should not have visual regressions for default columns', async ({ page }) => {
+      await page.setContent(
+        `
+          <style>
+            ion-col div {
+              background-color: #f7f7f7;
+              border: 1px solid #ddd;
+              font-size: 0.8em;
+              padding: 10px 5px;
+            }
+          </style>
+
+          <ion-grid>
+            <ion-row>
+              <ion-col size="3"><div>ion-col</div></ion-col>
+              <ion-col size="3"><div>ion-col</div></ion-col>
+              <ion-col size="3"><div>ion-col</div></ion-col>
+              <ion-col size="3"><div>ion-col</div></ion-col>
+              <ion-col size="6"><div>ion-col[width-50]</div></ion-col>
+              <ion-col size="3"><div>ion-col</div></ion-col>
+              <ion-col size="3"><div>ion-col</div></ion-col>
+            </ion-row>
+
+            <ion-row>
+              <ion-col size="3"><div>ion-col[width-25]</div></ion-col>
+              <ion-col><div>ion-col</div></ion-col>
+              <ion-col size="3"><div>ion-col[width-25]</div></ion-col>
+            </ion-row>
+
+            <ion-row>
+              <ion-col size="3"><div>ion-col[width-25]</div></ion-col>
+              <ion-col size="3" offset="3"><div>ion-col[width-25][offset-25]</div></ion-col>
+            </ion-row>
+
+            <ion-row>
+              <ion-col><div>ion-col</div></ion-col>
+              <ion-col><div>ion-col<br />#</div></ion-col>
+              <ion-col><div>ion-col<br /># <br />#</div></ion-col>
+              <ion-col><div>ion-col<br /># <br /># <br />#</div></ion-col>
+            </ion-row>
+
+            <ion-row>
+              <ion-col class="ion-align-self-start"><div>ion-col[top]</div></ion-col>
+              <ion-col class="ion-align-self-center"><div>ion-col[center]</div></ion-col>
+              <ion-col class="ion-align-self-end"><div>ion-col[bottom]</div></ion-col>
+              <ion-col><div>ion-col<br /># <br />#</div></ion-col>
+            </ion-row>
+
+            <ion-row class="ion-align-items-start">
+              <ion-col><div>[top] ion-col</div></ion-col>
+              <ion-col><div>[top] ion-col</div></ion-col>
+              <ion-col class="ion-align-self-end"><div>[top] ion-col[bottom]</div></ion-col>
+              <ion-col><div>ion-col<br /># <br />#</div></ion-col>
+            </ion-row>
+
+            <ion-row class="ion-align-items-center">
+              <ion-col><div>[center] ion-col</div></ion-col>
+              <ion-col><div>[center] ion-col</div></ion-col>
+              <ion-col><div>[center] ion-col</div></ion-col>
+              <ion-col><div>ion-col<br /># <br />#</div></ion-col>
+            </ion-row>
+
+            <ion-row class="ion-align-items-end">
+              <ion-col><div>[bottom] ion-col</div></ion-col>
+              <ion-col class="ion-align-self-start"><div>[bottom] ion-col[top]</div></ion-col>
+              <ion-col><div>[bottom] ion-col</div></ion-col>
+              <ion-col><div>ion-col<br /># <br />#</div></ion-col>
+            </ion-row>
+
+            <ion-row>
+              <ion-col size="12" size-sm><div>[responsive-sm] ion-col</div></ion-col>
+              <ion-col size="12" size-sm><div>[responsive-sm] ion-col</div></ion-col>
+              <ion-col size="12" size-sm><div>[responsive-sm] ion-col</div></ion-col>
+              <ion-col size="12" size-sm><div>[responsive-sm] ion-col</div></ion-col>
+            </ion-row>
+
+            <ion-row>
+              <ion-col size="12" size-md><div>[responsive-md] ion-col</div></ion-col>
+              <ion-col size="12" size-md><div>[responsive-md] ion-col</div></ion-col>
+              <ion-col size="12" size-md><div>[responsive-md] ion-col</div></ion-col>
+              <ion-col size="12" size-md><div>[responsive-md] ion-col</div></ion-col>
+            </ion-row>
+
+            <ion-row responsive-lg>
+              <ion-col size="6" offset="3"><div>[responsive-lg] ion-col[width-50][offset-25]</div></ion-col>
+              <ion-col size="3"><div>[responsive-lg] ion-col[width-25]</div></ion-col>
+            </ion-row>
+          </ion-grid>
+        `,
+        config
+      );
+
+      const grid = page.locator('ion-grid');
+
+      /**
+       * Grid overflows the default viewport, causing
+       * unrendered areas to appear black in the screenshot.
+       * Resizing to fit content.
+       */
+      const box = await grid.boundingBox();
+      await page.setViewportSize({ width: Math.ceil(box!.width), height: Math.ceil(box!.height) });
+
+      await expect(grid).toHaveScreenshot(screenshot('grid-basic'));
+    });
+
+    test('should not have visual regressions for custom columns', async ({ page }) => {
+      await page.setContent(
+        `
+          <style>
+            ion-col div {
+              background-color: #f7f7f7;
+              border: 1px solid #ddd;
+              font-size: 0.8em;
+              padding: 10px 5px;
+            }
+          </style>
+
+          <ion-grid style="--ion-grid-columns: 16">
+            <ion-row>
+              <ion-col size="16"><div>16</div></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col size="8"><div>8</div></ion-col>
+              <ion-col size="8"><div>8</div></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col size="13"><div>13</div></ion-col>
+              <ion-col size="3"><div>3</div></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col size="10" offset="6"><div>size 10, offset 6</div></ion-col>
+            </ion-row>
+          </ion-grid>
+        `,
+        config
+      );
 
       await page.setIonViewport();
 
-      await expect(page).toHaveScreenshot(screenshot(`grid-basic`));
+      const grid = page.locator('ion-grid');
+
+      await expect(grid).toHaveScreenshot(screenshot('grid-custom-columns'));
     });
   });
 });
diff --git a/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-ltr-Mobile-Chrome-linux.png b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-ltr-Mobile-Chrome-linux.png
index 707caaecc13..66bbd9ed32b 100644
Binary files a/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-ltr-Mobile-Firefox-linux.png b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-ltr-Mobile-Firefox-linux.png
index 8c1b5d84f49..23d1b31a72c 100644
Binary files a/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-ltr-Mobile-Safari-linux.png b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-ltr-Mobile-Safari-linux.png
index e020cae2f68..a4b61ab6fb5 100644
Binary files a/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-ltr-Mobile-Safari-linux.png and b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-rtl-Mobile-Chrome-linux.png b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-rtl-Mobile-Chrome-linux.png
index 762d30ab638..bb5b50218a7 100644
Binary files a/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-rtl-Mobile-Firefox-linux.png b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-rtl-Mobile-Firefox-linux.png
index 673cf5e73da..817413227da 100644
Binary files a/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-rtl-Mobile-Safari-linux.png b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-rtl-Mobile-Safari-linux.png
index b7ffb15e9eb..456341d34eb 100644
Binary files a/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-rtl-Mobile-Safari-linux.png and b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-custom-columns-md-ltr-Mobile-Chrome-linux.png b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-custom-columns-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..58da0f16b63
Binary files /dev/null and b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-custom-columns-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-custom-columns-md-ltr-Mobile-Firefox-linux.png b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-custom-columns-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7fe743605df
Binary files /dev/null and b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-custom-columns-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-custom-columns-md-ltr-Mobile-Safari-linux.png b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-custom-columns-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..28a9979669f
Binary files /dev/null and b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-custom-columns-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-custom-columns-md-rtl-Mobile-Chrome-linux.png b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-custom-columns-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..75d9fb08861
Binary files /dev/null and b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-custom-columns-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-custom-columns-md-rtl-Mobile-Firefox-linux.png b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-custom-columns-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ebff9076e0e
Binary files /dev/null and b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-custom-columns-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-custom-columns-md-rtl-Mobile-Safari-linux.png b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-custom-columns-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..447779de36a
Binary files /dev/null and b/core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-custom-columns-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/grid/test/basic/index.html b/core/src/components/grid/test/basic/index.html
index c351e8840d7..2a8ee1ae3a3 100644
--- a/core/src/components/grid/test/basic/index.html
+++ b/core/src/components/grid/test/basic/index.html
@@ -12,6 +12,24 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+        margin-left: 5px;
+      }
+
+      .grid-demo ion-col div {
+        background-color: #f7f7f7;
+        border: 1px solid #ddd;
+        font-size: 0.8em;
+        padding: 10px 5px;
+      }
+    </style>
   </head>
 
   <body>
@@ -23,7 +41,8 @@
       </ion-header>
 
       <ion-content id="content" class="grid-demo">
-        <ion-grid>
+        <h2>Default Columns</h2>
+        <ion-grid id="default-columns">
           <ion-row>
             <ion-col size="3">
               <div>ion-col</div>
@@ -205,16 +224,55 @@
             </ion-col>
           </ion-row>
         </ion-grid>
-      </ion-content>
 
-      <style>
-        .grid-demo ion-col div {
-          background-color: #f7f7f7;
-          border: 1px solid #ddd;
-          font-size: 0.8em;
-          padding: 10px 5px;
-        }
-      </style>
+        <h2>Custom Column Count</h2>
+        <ion-grid id="custom-columns" style="--ion-grid-columns: 16">
+          <ion-row>
+            <ion-col size="16">
+              <div>ion-col[size-16] full width</div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col size="8">
+              <div>ion-col[size-8] half</div>
+            </ion-col>
+            <ion-col size="8">
+              <div>ion-col[size-8] half</div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col size="4">
+              <div>ion-col[size-4]</div>
+            </ion-col>
+            <ion-col size="4">
+              <div>ion-col[size-4]</div>
+            </ion-col>
+            <ion-col size="4">
+              <div>ion-col[size-4]</div>
+            </ion-col>
+            <ion-col size="4">
+              <div>ion-col[size-4]</div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col size="13">
+              <div>ion-col[size-13]</div>
+            </ion-col>
+            <ion-col size="3">
+              <div>ion-col[size-3]</div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col size="10" offset="6">
+              <div>ion-col[size-10][offset-6]</div>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+      </ion-content>
     </ion-app>
   </body>
 </html>
diff --git a/core/src/components/grid/test/fixed/grid.e2e.ts b/core/src/components/grid/test/fixed/grid.e2e.ts
new file mode 100644
index 00000000000..b90e7b5972c
--- /dev/null
+++ b/core/src/components/grid/test/fixed/grid.e2e.ts
@@ -0,0 +1,55 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+import { defaultTheme as mdTheme } from '../../../../themes/md/default.tokens';
+import { SIZE_TO_MEDIA } from '../../../../utils/media';
+import { ION_GRID_BREAKPOINTS } from '../../grid.interface';
+
+const ionGridBreakpoints = mdTheme.components!.IonGrid!.breakpoint!;
+
+/**
+ * Parse the min-width (in px) out of each `SIZE_TO_MEDIA` entry. These are
+ * the same activation thresholds `matchBreakpoint` evaluates at runtime and
+ * that `$screen-breakpoints` defines on the SCSS side.
+ */
+const minWidthFor = (bp: (typeof ION_GRID_BREAKPOINTS)[number]): number => {
+  const match = (SIZE_TO_MEDIA[bp] as string).match(/\(min-width:\s*(\d+)px\)/);
+  return match ? parseInt(match[1], 10) : 0;
+};
+
+/**
+ * Viewport width that activates each breakpoint. `max(400, minWidth)` lands
+ * exactly on the threshold for sm/md/lg/xl (firing only that breakpoint's
+ * rule and nothing above it) while giving xs a renderable non-zero viewport.
+ */
+const VIEWPORT_AT_BREAKPOINT = Object.fromEntries(
+  ION_GRID_BREAKPOINTS.map((bp) => [bp, Math.max(400, minWidthFor(bp))])
+) as Record<(typeof ION_GRID_BREAKPOINTS)[number], number>;
+
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('grid: fixed'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/grid/test/fixed', config);
+    });
+
+    for (const breakpoint of ION_GRID_BREAKPOINTS) {
+      test(`fixed grid matches the ${breakpoint} width token`, async ({ page }) => {
+        const viewportWidth = VIEWPORT_AT_BREAKPOINT[breakpoint];
+        await page.setViewportSize({ width: viewportWidth, height: 800 });
+
+        const grid = page.locator('ion-grid');
+        const measuredWidth = await grid.evaluate((el) => el.getBoundingClientRect().width);
+
+        const expected = ionGridBreakpoints[breakpoint]!.width!;
+        const expectedPx = expected === '100%' ? viewportWidth : parseInt(expected, 10);
+
+        // Allow 1px tolerance for sub-pixel rounding in the browser.
+        expect(measuredWidth).toBeGreaterThanOrEqual(expectedPx - 1);
+        expect(measuredWidth).toBeLessThanOrEqual(expectedPx + 1);
+      });
+    }
+  });
+});
diff --git a/core/src/components/grid/test/fixed/index.html b/core/src/components/grid/test/fixed/index.html
new file mode 100644
index 00000000000..b9957d44291
--- /dev/null
+++ b/core/src/components/grid/test/fixed/index.html
@@ -0,0 +1,220 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Grid - Fixed</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Grid - Fixed</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-grid fixed>
+          <ion-row>
+            <ion-col size="3">
+              <div>ion-col</div>
+            </ion-col>
+            <ion-col size="3">
+              <div>ion-col</div>
+            </ion-col>
+            <ion-col size="3">
+              <div>ion-col</div>
+            </ion-col>
+            <ion-col size="3">
+              <div>ion-col</div>
+            </ion-col>
+
+            <ion-col size="6">
+              <div>ion-col[width-50]</div>
+            </ion-col>
+            <ion-col size="3">
+              <div>ion-col</div>
+            </ion-col>
+            <ion-col size="3">
+              <div>ion-col</div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col size="3">
+              <div>ion-col[width-25]</div>
+            </ion-col>
+            <ion-col>
+              <div>ion-col</div>
+            </ion-col>
+            <ion-col size="3">
+              <div>ion-col[width-25]</div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col size="3">
+              <div>ion-col[width-25]</div>
+            </ion-col>
+            <ion-col size="3" offset="3">
+              <div>ion-col[width-25][offset-25]</div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col>
+              <div>ion-col</div>
+            </ion-col>
+            <ion-col>
+              <div>
+                ion-col
+                <br />#
+              </div>
+            </ion-col>
+            <ion-col>
+              <div>
+                ion-col
+                <br /># <br />#
+              </div>
+            </ion-col>
+            <ion-col>
+              <div>
+                ion-col
+                <br /># <br /># <br />#
+              </div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col class="ion-align-self-start">
+              <div>ion-col[top]</div>
+            </ion-col>
+            <ion-col class="ion-align-self-center">
+              <div>ion-col[center]</div>
+            </ion-col>
+            <ion-col class="ion-align-self-end">
+              <div>ion-col[bottom]</div>
+            </ion-col>
+            <ion-col>
+              <div>
+                ion-col
+                <br /># <br />#
+              </div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row class="ion-align-items-start">
+            <ion-col>
+              <div>[top] ion-col</div>
+            </ion-col>
+            <ion-col>
+              <div>[top] ion-col</div>
+            </ion-col>
+            <ion-col class="ion-align-self-end">
+              <div>[top] ion-col[bottom]</div>
+            </ion-col>
+            <ion-col>
+              <div>
+                ion-col
+                <br /># <br />#
+              </div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row class="ion-align-items-center">
+            <ion-col>
+              <div>[center] ion-col</div>
+            </ion-col>
+            <ion-col>
+              <div>[center] ion-col</div>
+            </ion-col>
+            <ion-col>
+              <div>[center] ion-col</div>
+            </ion-col>
+            <ion-col>
+              <div>
+                ion-col
+                <br /># <br />#
+              </div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row class="ion-align-items-end">
+            <ion-col>
+              <div>[bottom] ion-col</div>
+            </ion-col>
+            <ion-col class="ion-align-self-start">
+              <div>[bottom] ion-col[top]</div>
+            </ion-col>
+            <ion-col>
+              <div>[bottom] ion-col</div>
+            </ion-col>
+            <ion-col>
+              <div>
+                ion-col
+                <br /># <br />#
+              </div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col size="12" size-sm>
+              <div>[responsive-sm] ion-col</div>
+            </ion-col>
+            <ion-col size="12" size-sm>
+              <div>[responsive-sm] ion-col</div>
+            </ion-col>
+            <ion-col size="12" size-sm>
+              <div>[responsive-sm] ion-col</div>
+            </ion-col>
+            <ion-col size="12" size-sm>
+              <div>[responsive-sm] ion-col</div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col size="12" size-md>
+              <div>[responsive-md] ion-col</div>
+            </ion-col>
+            <ion-col size="12" size-md>
+              <div>[responsive-md] ion-col</div>
+            </ion-col>
+            <ion-col size="12" size-md>
+              <div>[responsive-md] ion-col</div>
+            </ion-col>
+            <ion-col size="12" size-md>
+              <div>[responsive-md] ion-col</div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row responsive-lg>
+            <ion-col size="6" offset="3">
+              <div>[responsive-lg] ion-col[width-50][offset-25]</div>
+            </ion-col>
+            <ion-col size="3">
+              <div>[responsive-lg] ion-col[width-25]</div>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+      </ion-content>
+
+      <style>
+        ion-grid ion-col div {
+          background-color: #f7f7f7;
+          border: 1px solid #ddd;
+          font-size: 0.8em;
+          padding: 10px 5px;
+        }
+      </style>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts b/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts
index b4a22e9c1ab..078b855d083 100644
--- a/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts
+++ b/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts
@@ -1,3 +1,4 @@
+// TODO(FW-7557): Remove this in a major release.
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
@@ -5,13 +6,13 @@ import { configs, test } from '@utils/test/playwright';
  * ion-grid does not have different styling per-mode
  */
 configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('grid: offsets'), () => {
+  test.describe(title('grid: pull/push'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/grid/test/offsets-pull-push`, config);
 
       await page.setIonViewport();
 
-      await expect(page).toHaveScreenshot(screenshot(`grid-offsets`));
+      await expect(page).toHaveScreenshot(screenshot('grid-pull-push'));
     });
   });
 });
diff --git a/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Chrome-linux.png b/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 1f12db2d4f7..00000000000
Binary files a/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Firefox-linux.png b/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index bbc2aac6fa6..00000000000
Binary files a/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Safari-linux.png b/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 8f955733bf6..00000000000
Binary files a/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Chrome-linux.png b/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 140e0624bd6..00000000000
Binary files a/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Firefox-linux.png b/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 07f94379599..00000000000
Binary files a/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Safari-linux.png b/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 09d8dfdb812..00000000000
Binary files a/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-pull-push-md-ltr-Mobile-Chrome-linux.png b/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-pull-push-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0eae371344d
Binary files /dev/null and b/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-pull-push-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-pull-push-md-ltr-Mobile-Firefox-linux.png b/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-pull-push-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1b0ff1c3909
Binary files /dev/null and b/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-pull-push-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-pull-push-md-ltr-Mobile-Safari-linux.png b/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-pull-push-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d75bbb80ed1
Binary files /dev/null and b/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-pull-push-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-pull-push-md-rtl-Mobile-Chrome-linux.png b/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-pull-push-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2ca09e8bd19
Binary files /dev/null and b/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-pull-push-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-pull-push-md-rtl-Mobile-Firefox-linux.png b/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-pull-push-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..bf5d4df52de
Binary files /dev/null and b/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-pull-push-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-pull-push-md-rtl-Mobile-Safari-linux.png b/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-pull-push-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4a590eb62ca
Binary files /dev/null and b/core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-pull-push-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/grid/test/offsets-pull-push/index.html b/core/src/components/grid/test/offsets-pull-push/index.html
index 4117f49d4ae..901679053e7 100644
--- a/core/src/components/grid/test/offsets-pull-push/index.html
+++ b/core/src/components/grid/test/offsets-pull-push/index.html
@@ -1,8 +1,9 @@
+<!-- TODO(FW-7557): Remove this in a major release. -->
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Grid - Pull & Push</title>
+    <title>Grid - Pull & Push (deprecated)</title>
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
@@ -18,12 +19,12 @@
     <ion-app>
       <ion-header>
         <ion-toolbar>
-          <ion-title>Grid - Offsets</ion-title>
+          <ion-title>Grid - Pull & Push (deprecated)</ion-title>
         </ion-toolbar>
       </ion-header>
 
       <ion-content id="content" class="grid-demo">
-        <h2 class="ion-padding-start">Push</h2>
+        <h2 class="ion-padding-start">Push (deprecated)</h2>
         <ion-grid>
           <ion-row>
             <ion-col size="auto" push="1">
@@ -35,7 +36,7 @@ <h2 class="ion-padding-start">Push</h2>
           </ion-row>
         </ion-grid>
 
-        <h2 class="ion-padding-start">Push and Pull</h2>
+        <h2 class="ion-padding-start">Push and Pull (deprecated)</h2>
         <ion-grid>
           <ion-row>
             <ion-col size="9" push="3">
@@ -57,43 +58,8 @@ <h2 class="ion-padding-start">Push and Pull</h2>
             </ion-col>
           </ion-row>
         </ion-grid>
-
-        <h2 class="ion-padding-start">Offset</h2>
-        <ion-grid>
-          <ion-row>
-            <ion-col offset="5">
-              <div>ion-col offset=5</div>
-            </ion-col>
-            <ion-col offset="2">
-              <div>ion-col offset="2"</div>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <h2 class="ion-padding-start">Dynamic Offset</h2>
-        <ion-grid>
-          <ion-row>
-            <ion-col id="dynamicOffsetCol" offset="2" offset-md="5">
-              <div>ion-col offset="2" offset-md="5"</div>
-            </ion-col>
-            <ion-col offset="2" offset-md="5">
-              <div>ion-col offset="2" offset-md="5"</div>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <button onclick="updateOffset()">Update Offset</button>
       </ion-content>
 
-      <script>
-        function updateOffset() {
-          var dynamicOffsetCol = document.getElementById('dynamicOffsetCol');
-          var currentOffset = dynamicOffsetCol.offset;
-          dynamicOffsetCol.offset = currentOffset === '2' ? '4' : '2';
-          console.log('Updating offset from ' + currentOffset + ' to ' + dynamicOffsetCol.offset);
-        }
-      </script>
-
       <style>
         .grid-demo ion-col div {
           background-color: #f7f7f7;
diff --git a/core/src/components/grid/test/offsets/grid.e2e.ts b/core/src/components/grid/test/offsets/grid.e2e.ts
index a8ae413602f..3caa8507c48 100644
--- a/core/src/components/grid/test/offsets/grid.e2e.ts
+++ b/core/src/components/grid/test/offsets/grid.e2e.ts
@@ -2,16 +2,144 @@ import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
 /**
- * ion-grid does not have different styling per-mode
+ * This behavior does not vary across modes.
  */
 configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('grid: offsets'), () => {
-    test('should not have visual regressions', async ({ page }) => {
-      await page.goto(`/src/components/grid/test/offsets`, config);
+    test('should not have visual regressions for order', async ({ page }) => {
+      await page.setContent(
+        `
+          <style>
+            ion-col div {
+              background-color: #f7f7f7;
+              border: 1px solid #ddd;
+              font-size: 0.8em;
+              padding: 10px 5px;
+            }
+          </style>
+
+          <div id="order">
+            <ion-grid>
+              <ion-row>
+                <ion-col size="9" order="2"><div>order 2</div></ion-col>
+                <ion-col size="3" order="1"><div>order 1</div></ion-col>
+              </ion-row>
+            </ion-grid>
+
+            <ion-grid>
+              <ion-row>
+                <ion-col size="3" size-md="6" order="2" order-md="1"><div>order 2, order-md 1</div></ion-col>
+                <ion-col size="9" size-md="6" order="1" order-md="2"><div>order 1, order-md 2</div></ion-col>
+              </ion-row>
+            </ion-grid>
+          </div>
+        `,
+        config
+      );
 
       await page.setIonViewport();
 
-      await expect(page).toHaveScreenshot(screenshot(`grid-offsets`));
+      const order = page.locator('#order');
+
+      await expect(order).toHaveScreenshot(screenshot('grid-offsets-order'));
+    });
+
+    test('should shift the column by its offset count in column units', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-grid>
+            <ion-row>
+              <ion-col size="auto" offset="1">offset 1</ion-col>
+              <ion-col size="auto" offset="0">offset 0</ion-col>
+            </ion-row>
+          </ion-grid>
+        `,
+        config
+      );
+
+      const { rowWidth, offsetMargin, noOffsetMargin } = await page.locator('ion-row').evaluate((row) => {
+        const offsetCol = row.querySelector('ion-col[offset="1"]')!;
+        const noOffsetCol = row.querySelector('ion-col[offset="0"]')!;
+
+        return {
+          rowWidth: row.clientWidth,
+          offsetMargin: parseFloat(getComputedStyle(offsetCol).marginInlineStart),
+          noOffsetMargin: parseFloat(getComputedStyle(noOffsetCol).marginInlineStart),
+        };
+      });
+
+      // One column unit is rowWidth / 12 (12 column grid, no gap).
+      const columnUnit = rowWidth / 12;
+
+      expect(offsetMargin).toBeCloseTo(columnUnit, 0);
+      expect(noOffsetMargin).toBe(0);
+    });
+
+    test('should scale the offset margin with the offset count', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-grid>
+            <ion-row>
+              <ion-col offset="5">offset 5</ion-col>
+              <ion-col offset="2">offset 2</ion-col>
+            </ion-row>
+          </ion-grid>
+        `,
+        config
+      );
+
+      const { rowWidth, largeOffsetMargin, smallOffsetMargin } = await page.locator('ion-row').evaluate((row) => {
+        const largeOffsetCol = row.querySelector('ion-col[offset="5"]')!;
+        const smallOffsetCol = row.querySelector('ion-col[offset="2"]')!;
+
+        return {
+          rowWidth: row.clientWidth,
+          largeOffsetMargin: parseFloat(getComputedStyle(largeOffsetCol).marginInlineStart),
+          smallOffsetMargin: parseFloat(getComputedStyle(smallOffsetCol).marginInlineStart),
+        };
+      });
+
+      // One column unit is rowWidth / 12 (12 column grid, no gap).
+      const columnUnit = rowWidth / 12;
+
+      expect(largeOffsetMargin).toBeCloseTo(columnUnit * 5, 0);
+      expect(smallOffsetMargin).toBeCloseTo(columnUnit * 2, 0);
+    });
+
+    test('updating the offset prop updates the column margin', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-grid>
+            <ion-row>
+              <ion-col id="dynamic-offset" offset="2">offset</ion-col>
+            </ion-row>
+          </ion-grid>
+        `,
+        config
+      );
+
+      const { rowWidth, offsetMargin } = await page.locator('ion-row').evaluate((row) => {
+        const dynamicOffsetCol = row.querySelector('#dynamic-offset')!;
+
+        return {
+          rowWidth: row.clientWidth,
+          offsetMargin: parseFloat(getComputedStyle(dynamicOffsetCol).marginInlineStart),
+        };
+      });
+
+      // One column unit is rowWidth / 12 (12 column grid, no gap).
+      const columnUnit = rowWidth / 12;
+
+      expect(offsetMargin).toBeCloseTo(columnUnit * 2, 0);
+
+      // Updating the offset from 2 to 4 shifts the column by two more units.
+      const dynamicOffsetCol = page.locator('#dynamic-offset');
+      await dynamicOffsetCol.evaluate((col) => col.setAttribute('offset', '4'));
+
+      const updatedMargin = () =>
+        dynamicOffsetCol.evaluate((col) => parseFloat(getComputedStyle(col).marginInlineStart));
+
+      await expect.poll(updatedMargin).toBeCloseTo(columnUnit * 4, 0);
     });
   });
 });
diff --git a/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Chrome-linux.png b/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index f7d75c3e428..00000000000
Binary files a/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Firefox-linux.png b/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index d4e6e57c6f4..00000000000
Binary files a/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Safari-linux.png b/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 750b79cd2e6..00000000000
Binary files a/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Chrome-linux.png b/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index e6ef703ec9d..00000000000
Binary files a/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Firefox-linux.png b/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 77d81d121ca..00000000000
Binary files a/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Safari-linux.png b/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 619687ddb61..00000000000
Binary files a/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-order-md-ltr-Mobile-Chrome-linux.png b/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-order-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..dad60ed968e
Binary files /dev/null and b/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-order-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-order-md-ltr-Mobile-Firefox-linux.png b/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-order-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d0232835623
Binary files /dev/null and b/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-order-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-order-md-ltr-Mobile-Safari-linux.png b/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-order-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..206b8e54440
Binary files /dev/null and b/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-order-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-order-md-rtl-Mobile-Chrome-linux.png b/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-order-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a2775683d72
Binary files /dev/null and b/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-order-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-order-md-rtl-Mobile-Firefox-linux.png b/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-order-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c537417db18
Binary files /dev/null and b/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-order-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-order-md-rtl-Mobile-Safari-linux.png b/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-order-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1ec6c839ba7
Binary files /dev/null and b/core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-order-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/grid/test/offsets/index.html b/core/src/components/grid/test/offsets/index.html
index eebd67a699f..954161297f6 100644
--- a/core/src/components/grid/test/offsets/index.html
+++ b/core/src/components/grid/test/offsets/index.html
@@ -22,65 +22,69 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content id="content" class="grid-demo">
-        <h2 class="ion-padding-start">Offset</h2>
-        <ion-grid>
-          <ion-row>
-            <ion-col size="auto" offset="1">
-              <div>ion-col offset 1</div>
-            </ion-col>
-            <ion-col size="auto" offset="0">
-              <div>ion-col offset 0</div>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
+      <ion-content class="grid-demo">
+        <div id="grids">
+          <h2 class="ion-padding-start">Offset</h2>
+          <ion-grid id="offset-1">
+            <ion-row>
+              <ion-col size="auto" offset="1">
+                <div>ion-col offset 1</div>
+              </ion-col>
+              <ion-col size="auto" offset="0">
+                <div>ion-col offset 0</div>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
 
-        <h2 class="ion-padding-start">Order</h2>
-        <ion-grid>
-          <ion-row>
-            <ion-col size="9" order="2">
-              <div>ion-col order 2</div>
-            </ion-col>
-            <ion-col size="3" order="1">
-              <div>ion-col order 1</div>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
+          <h2 class="ion-padding-start">Order</h2>
+          <div id="order">
+            <ion-grid>
+              <ion-row>
+                <ion-col size="9" order="2">
+                  <div>ion-col order 2</div>
+                </ion-col>
+                <ion-col size="3" order="1">
+                  <div>ion-col order 1</div>
+                </ion-col>
+              </ion-row>
+            </ion-grid>
 
-        <ion-grid>
-          <ion-row>
-            <ion-col size="3" size-md="6" order="2" order-md="1">
-              <div>ion-col size="3" size-md="6" order="2" order-md="1"</div>
-            </ion-col>
-            <ion-col size="9" size-md="6" order="1" order-md="2">
-              <div>ion-col size="9" size-md="6" order="1" order-md="2"</div>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
+            <ion-grid>
+              <ion-row>
+                <ion-col size="3" size-md="6" order="2" order-md="1">
+                  <div>ion-col size="3" size-md="6" order="2" order-md="1"</div>
+                </ion-col>
+                <ion-col size="9" size-md="6" order="1" order-md="2">
+                  <div>ion-col size="9" size-md="6" order="1" order-md="2"</div>
+                </ion-col>
+              </ion-row>
+            </ion-grid>
+          </div>
 
-        <h2 class="ion-padding-start">Offset</h2>
-        <ion-grid>
-          <ion-row>
-            <ion-col offset="5">
-              <div>ion-col offset=5</div>
-            </ion-col>
-            <ion-col offset="2">
-              <div>ion-col offset="2"</div>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
+          <h2 class="ion-padding-start">Offset</h2>
+          <ion-grid id="offset-2">
+            <ion-row>
+              <ion-col offset="5">
+                <div>ion-col offset=5</div>
+              </ion-col>
+              <ion-col offset="2">
+                <div>ion-col offset="2"</div>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
 
-        <h2 class="ion-padding-start">Dynamic Offset</h2>
-        <ion-grid>
-          <ion-row>
-            <ion-col id="dynamicOffsetCol" offset="2" offset-md="5">
-              <div>ion-col offset="2" offset-md="5"</div>
-            </ion-col>
-            <ion-col offset="2" offset-md="5">
-              <div>ion-col offset="2" offset-md="5"</div>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
+          <h2 class="ion-padding-start">Dynamic Offset</h2>
+          <ion-grid id="dynamic-offset">
+            <ion-row>
+              <ion-col id="dynamicOffsetCol" offset="2" offset-md="5">
+                <div>ion-col offset="2" offset-md="5"</div>
+              </ion-col>
+              <ion-col offset="2" offset-md="5">
+                <div>ion-col offset="2" offset-md="5"</div>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+        </div>
 
         <button onclick="updateOffset()">Update Offset</button>
       </ion-content>
diff --git a/core/src/components/grid/test/padding/grid.e2e.ts b/core/src/components/grid/test/padding/grid.e2e.ts
index 71947ec4e8f..438f58bb440 100644
--- a/core/src/components/grid/test/padding/grid.e2e.ts
+++ b/core/src/components/grid/test/padding/grid.e2e.ts
@@ -2,16 +2,191 @@ import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
 /**
- * ion-grid does not have different styling per-mode
+ * This behavior does not vary across modes.
  */
 configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('grid: padding'), () => {
-    test('should not have visual regressions', async ({ page }) => {
-      await page.goto(`/src/components/grid/test/padding`, config);
+    test('should remove all padding with the no padding utility', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-grid class="ion-no-padding">
+            <ion-row>
+              <ion-col>col</ion-col>
+            </ion-row>
+          </ion-grid>
+        `,
+        config
+      );
+
+      const padding = await page.locator('ion-grid').evaluate((grid) => {
+        const styles = getComputedStyle(grid);
+
+        return {
+          top: styles.paddingTop,
+          end: styles.paddingInlineEnd,
+          bottom: styles.paddingBottom,
+          start: styles.paddingInlineStart,
+        };
+      });
+
+      expect(padding).toEqual({ top: '0px', end: '0px', bottom: '0px', start: '0px' });
+    });
+
+    test('should not have visual regressions for a nested grid', async ({ page }) => {
+      await page.setContent(
+        `
+          <style>
+            ion-grid {
+              background: #b9ce4f;
+            }
+
+            ion-col {
+              background: #e2b863;
+            }
+
+            ion-col div {
+              background-color: #f7f7f7;
+              border: 1px solid #ddd;
+              font-size: 0.8em;
+              padding: 10px 5px;
+            }
+          </style>
+
+          <div id="nested">
+            <ion-grid class="ion-no-padding">
+              <ion-row>
+                <ion-col>
+                  <ion-grid>
+                    <ion-row>
+                      <ion-col><div>col</div></ion-col>
+                      <ion-col><div>col</div></ion-col>
+                    </ion-row>
+                  </ion-grid>
+                </ion-col>
+                <ion-col><div>col</div></ion-col>
+                <ion-col><div>col</div></ion-col>
+                <ion-col><div>col</div></ion-col>
+              </ion-row>
+            </ion-grid>
+          </div>
+        `,
+        config
+      );
+
+      await page.setIonViewport();
+
+      const nested = page.locator('#nested');
+
+      await expect(nested).toHaveScreenshot(screenshot('grid-padding-nested'));
+    });
+
+    test('should not have visual regressions for default padding', async ({ page }) => {
+      await page.setContent(
+        `
+          <style>
+            ion-grid {
+              background: #b9ce4f;
+            }
+
+            ion-col {
+              background: #e2b863;
+            }
+
+            ion-col div {
+              background-color: #f7f7f7;
+              border: 1px solid #ddd;
+              font-size: 0.8em;
+              padding: 10px 5px;
+            }
+          </style>
+
+          <ion-grid>
+            <ion-row>
+              <ion-col><div>col</div></ion-col>
+              <ion-col><div>col</div></ion-col>
+              <ion-col><div>col</div></ion-col>
+              <ion-col><div>col</div></ion-col>
+            </ion-row>
+          </ion-grid>
+        `,
+        config
+      );
 
       await page.setIonViewport();
 
-      await expect(page).toHaveScreenshot(screenshot(`grid-padding`));
+      const grid = page.locator('ion-grid');
+
+      await expect(grid).toHaveScreenshot(screenshot('grid-padding-default'));
+    });
+
+    test('should apply custom grid padding from the breakpoint variables', async ({ page }) => {
+      await page.setContent(
+        `
+          <style>
+            ion-grid {
+              --ion-grid-breakpoint-xs-padding-top: 8px;
+              --ion-grid-breakpoint-xs-padding-end: 8px;
+              --ion-grid-breakpoint-xs-padding-bottom: 8px;
+              --ion-grid-breakpoint-xs-padding-start: 8px;
+            }
+          </style>
+
+          <ion-grid>
+            <ion-row>
+              <ion-col>col</ion-col>
+            </ion-row>
+          </ion-grid>
+        `,
+        config
+      );
+
+      const padding = await page.locator('ion-grid').evaluate((grid) => {
+        const styles = getComputedStyle(grid);
+
+        return {
+          top: styles.paddingTop,
+          end: styles.paddingInlineEnd,
+          bottom: styles.paddingBottom,
+          start: styles.paddingInlineStart,
+        };
+      });
+
+      expect(padding).toEqual({ top: '8px', end: '8px', bottom: '8px', start: '8px' });
+    });
+
+    test('should apply custom column padding from the breakpoint variables', async ({ page }) => {
+      await page.setContent(
+        `
+          <style>
+            ion-col {
+              --ion-col-breakpoint-xs-padding-top: 2px;
+              --ion-col-breakpoint-xs-padding-end: 2px;
+              --ion-col-breakpoint-xs-padding-bottom: 2px;
+              --ion-col-breakpoint-xs-padding-start: 2px;
+            }
+          </style>
+
+          <ion-grid>
+            <ion-row>
+              <ion-col>col</ion-col>
+            </ion-row>
+          </ion-grid>
+        `,
+        config
+      );
+
+      const padding = await page.locator('ion-col').evaluate((col) => {
+        const styles = getComputedStyle(col);
+
+        return {
+          top: styles.paddingTop,
+          end: styles.paddingInlineEnd,
+          bottom: styles.paddingBottom,
+          start: styles.paddingInlineStart,
+        };
+      });
+
+      expect(padding).toEqual({ top: '2px', end: '2px', bottom: '2px', start: '2px' });
     });
   });
 });
diff --git a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-default-md-ltr-Mobile-Chrome-linux.png b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-default-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..cac6e4bf7a0
Binary files /dev/null and b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-default-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-default-md-ltr-Mobile-Firefox-linux.png b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-default-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..cf8fe9f9f9d
Binary files /dev/null and b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-default-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-default-md-ltr-Mobile-Safari-linux.png b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-default-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..3074e3895bb
Binary files /dev/null and b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-default-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-default-md-rtl-Mobile-Chrome-linux.png b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-default-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..6fc9b2b8342
Binary files /dev/null and b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-default-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-default-md-rtl-Mobile-Firefox-linux.png b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-default-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..54cd57856d4
Binary files /dev/null and b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-default-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-default-md-rtl-Mobile-Safari-linux.png b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-default-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d5b43d12f9b
Binary files /dev/null and b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-default-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-ltr-Mobile-Chrome-linux.png b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 1216197bc36..00000000000
Binary files a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-ltr-Mobile-Firefox-linux.png b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index 98df458853e..00000000000
Binary files a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-ltr-Mobile-Safari-linux.png b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 9615d03cf0e..00000000000
Binary files a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-rtl-Mobile-Chrome-linux.png b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 435ac076ac9..00000000000
Binary files a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-rtl-Mobile-Firefox-linux.png b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index ed7faba7740..00000000000
Binary files a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-rtl-Mobile-Safari-linux.png b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 70c06d0ca95..00000000000
Binary files a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-nested-md-ltr-Mobile-Chrome-linux.png b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-nested-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..78cf5acebbe
Binary files /dev/null and b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-nested-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-nested-md-ltr-Mobile-Firefox-linux.png b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-nested-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..db809c2491a
Binary files /dev/null and b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-nested-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-nested-md-ltr-Mobile-Safari-linux.png b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-nested-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7d291e0a125
Binary files /dev/null and b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-nested-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-nested-md-rtl-Mobile-Chrome-linux.png b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-nested-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..6c70f4a438f
Binary files /dev/null and b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-nested-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-nested-md-rtl-Mobile-Firefox-linux.png b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-nested-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e3314dcede2
Binary files /dev/null and b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-nested-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-nested-md-rtl-Mobile-Safari-linux.png b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-nested-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..0169cde203d
Binary files /dev/null and b/core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-nested-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/grid/test/padding/index.html b/core/src/components/grid/test/padding/index.html
index 84a1c14f330..4d1c53c7c28 100644
--- a/core/src/components/grid/test/padding/index.html
+++ b/core/src/components/grid/test/padding/index.html
@@ -24,7 +24,7 @@
 
       <ion-content id="content" class="grid-demo">
         <h2 class="ion-padding-start">No Grid Padding</h2>
-        <ion-grid class="ion-no-padding">
+        <ion-grid class="ion-no-padding" id="no-grid-padding">
           <ion-row>
             <ion-col>
               <div>ion-col</div>
@@ -42,7 +42,7 @@ <h2 class="ion-padding-start">No Grid Padding</h2>
         </ion-grid>
 
         <h2 class="ion-padding-start">No Grid Padding / Nested</h2>
-        <ion-grid class="ion-no-padding">
+        <ion-grid class="ion-no-padding" id="no-grid-padding-nested">
           <ion-row>
             <ion-col>
               <ion-grid>
@@ -69,7 +69,7 @@ <h2 class="ion-padding-start">No Grid Padding / Nested</h2>
         </ion-grid>
 
         <h2 class="ion-padding-start">Default Grid Padding</h2>
-        <ion-grid>
+        <ion-grid id="default-grid-padding">
           <ion-row>
             <ion-col>
               <div>ion-col</div>
@@ -87,7 +87,7 @@ <h2 class="ion-padding-start">Default Grid Padding</h2>
         </ion-grid>
 
         <h2 class="ion-padding-start">Custom Grid Padding By Breakpoint</h2>
-        <ion-grid class="custom-grid-padding">
+        <ion-grid class="custom-grid-padding" id="custom-grid-padding">
           <ion-row>
             <ion-col>
               <div>ion-col</div>
@@ -105,18 +105,18 @@ <h2 class="ion-padding-start">Custom Grid Padding By Breakpoint</h2>
         </ion-grid>
 
         <h2 class="ion-padding-start">Custom Column Padding By Breakpoint</h2>
-        <ion-grid class="custom-column-padding">
+        <ion-grid id="custom-column-padding">
           <ion-row>
-            <ion-col>
+            <ion-col class="custom-column-padding">
               <div>ion-col</div>
             </ion-col>
-            <ion-col>
+            <ion-col class="custom-column-padding">
               <div>ion-col</div>
             </ion-col>
-            <ion-col>
+            <ion-col class="custom-column-padding">
               <div>ion-col</div>
             </ion-col>
-            <ion-col>
+            <ion-col class="custom-column-padding">
               <div>ion-col</div>
             </ion-col>
           </ion-row>
@@ -136,19 +136,57 @@ <h2 class="ion-padding-start">Custom Column Padding By Breakpoint</h2>
         }
 
         .custom-grid-padding {
-          --ion-grid-padding-xs: 0;
-          --ion-grid-padding-sm: 10px;
-          --ion-grid-padding-md: 20px;
-          --ion-grid-padding-lg: 30px;
-          --ion-grid-padding-xl: 40px;
+          --ion-grid-breakpoint-xs-padding-top: 0;
+          --ion-grid-breakpoint-xs-padding-end: 0;
+          --ion-grid-breakpoint-xs-padding-bottom: 0;
+          --ion-grid-breakpoint-xs-padding-start: 0;
+
+          --ion-grid-breakpoint-sm-padding-top: 10px;
+          --ion-grid-breakpoint-sm-padding-end: 10px;
+          --ion-grid-breakpoint-sm-padding-bottom: 10px;
+          --ion-grid-breakpoint-sm-padding-start: 10px;
+
+          --ion-grid-breakpoint-md-padding-top: 20px;
+          --ion-grid-breakpoint-md-padding-end: 20px;
+          --ion-grid-breakpoint-md-padding-bottom: 20px;
+          --ion-grid-breakpoint-md-padding-start: 20px;
+
+          --ion-grid-breakpoint-lg-padding-top: 30px;
+          --ion-grid-breakpoint-lg-padding-end: 30px;
+          --ion-grid-breakpoint-lg-padding-bottom: 30px;
+          --ion-grid-breakpoint-lg-padding-start: 30px;
+
+          --ion-grid-breakpoint-xl-padding-top: 40px;
+          --ion-grid-breakpoint-xl-padding-end: 40px;
+          --ion-grid-breakpoint-xl-padding-bottom: 40px;
+          --ion-grid-breakpoint-xl-padding-start: 40px;
         }
 
         .custom-column-padding {
-          --ion-grid-column-padding-xs: 2px;
-          --ion-grid-column-padding-sm: 5px;
-          --ion-grid-column-padding-md: 10px;
-          --ion-grid-column-padding-lg: 15px;
-          --ion-grid-column-padding-xl: 25px;
+          --ion-col-breakpoint-xs-padding-top: 2px;
+          --ion-col-breakpoint-xs-padding-end: 2px;
+          --ion-col-breakpoint-xs-padding-bottom: 2px;
+          --ion-col-breakpoint-xs-padding-start: 2px;
+
+          --ion-col-breakpoint-sm-padding-top: 5px;
+          --ion-col-breakpoint-sm-padding-end: 5px;
+          --ion-col-breakpoint-sm-padding-bottom: 5px;
+          --ion-col-breakpoint-sm-padding-start: 5px;
+
+          --ion-col-breakpoint-md-padding-top: 10px;
+          --ion-col-breakpoint-md-padding-end: 10px;
+          --ion-col-breakpoint-md-padding-bottom: 10px;
+          --ion-col-breakpoint-md-padding-start: 10px;
+
+          --ion-col-breakpoint-lg-padding-top: 15px;
+          --ion-col-breakpoint-lg-padding-end: 15px;
+          --ion-col-breakpoint-lg-padding-bottom: 15px;
+          --ion-col-breakpoint-lg-padding-start: 15px;
+
+          --ion-col-breakpoint-xl-padding-top: 25px;
+          --ion-col-breakpoint-xl-padding-end: 25px;
+          --ion-col-breakpoint-xl-padding-bottom: 25px;
+          --ion-col-breakpoint-xl-padding-start: 25px;
         }
 
         ion-col {
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts b/core/src/components/grid/test/sizes/grid.e2e.ts
index 0f03cb6050d..9b4d8ee2a7d 100644
--- a/core/src/components/grid/test/sizes/grid.e2e.ts
+++ b/core/src/components/grid/test/sizes/grid.e2e.ts
@@ -2,16 +2,148 @@ import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
 /**
- * ion-grid does not have different styling per-mode
+ * This behavior does not vary across modes.
  */
 configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('grid: sizes'), () => {
-    test('should not have visual regressions', async ({ page }) => {
-      await page.goto(`/src/components/grid/test/sizes`, config);
+    test('should not have visual regressions for responsive sm columns', async ({ page }) => {
+      await page.setContent(
+        `
+          <style>
+            ion-col div {
+              background-color: #f7f7f7;
+              border: 1px solid #ddd;
+              font-size: 0.8em;
+              padding: 10px 5px;
+            }
+          </style>
+
+          <ion-grid>
+            <ion-row>
+              <ion-col size="12" size-sm><div>col</div></ion-col>
+              <ion-col size="12" size-sm><div>col</div></ion-col>
+              <ion-col size="12" size-sm><div>col</div></ion-col>
+              <ion-col size="12" size-sm><div>col</div></ion-col>
+            </ion-row>
+          </ion-grid>
+        `,
+        config
+      );
+
+      await page.setIonViewport();
+
+      const grid = page.locator('ion-grid');
+
+      await expect(grid).toHaveScreenshot(screenshot('grid-sizes-responsive-sm'));
+    });
+
+    test('should not have visual regressions for auto sized columns', async ({ page }) => {
+      await page.setContent(
+        `
+          <style>
+            ion-col div {
+              background-color: #f7f7f7;
+              border: 1px solid #ddd;
+              font-size: 0.8em;
+              padding: 10px 5px;
+            }
+          </style>
+
+          <ion-grid>
+            <ion-row>
+              <ion-col><div>col</div></ion-col>
+              <ion-col size="auto"><div>col with extra text to make it auto</div></ion-col>
+              <ion-col><div>col</div></ion-col>
+              <ion-col><div>col</div></ion-col>
+            </ion-row>
+          </ion-grid>
+        `,
+        config
+      );
 
       await page.setIonViewport();
 
-      await expect(page).toHaveScreenshot(screenshot(`grid-sizes`));
+      const grid = page.locator('ion-grid');
+
+      await expect(grid).toHaveScreenshot(screenshot('grid-sizes-size-auto'));
+    });
+
+    test('should not have visual regressions for breakpoint sizes', async ({ page }) => {
+      await page.setContent(
+        `
+          <style>
+            ion-col div {
+              background-color: #f7f7f7;
+              border: 1px solid #ddd;
+              font-size: 0.8em;
+              padding: 10px 5px;
+            }
+          </style>
+
+          <div id="breakpoint-sizes">
+            <ion-grid>
+              <ion-row>
+                <ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"><div>size 12, sm 6, md 4, lg 3, xl 1</div></ion-col>
+                <ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"><div>size 12, sm 6, md 4, lg 3, xl 1</div></ion-col>
+                <ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"><div>size 12, sm 6, md 4, lg 3, xl 1</div></ion-col>
+                <ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"><div>size 12, sm 6, md 4, lg 3, xl 1</div></ion-col>
+              </ion-row>
+            </ion-grid>
+
+            <ion-grid>
+              <ion-row>
+                <ion-col size="2"><div>size 2</div></ion-col>
+                <ion-col size="1"><div>size 1</div></ion-col>
+                <ion-col size="2"><div>size 2</div></ion-col>
+                <ion-col size="3"><div>size 3</div></ion-col>
+              </ion-row>
+            </ion-grid>
+          </div>
+        `,
+        config
+      );
+
+      await page.setIonViewport();
+
+      const breakpointSizes = page.locator('#breakpoint-sizes');
+
+      await expect(breakpointSizes).toHaveScreenshot(screenshot('grid-sizes-breakpoint-sizes'));
+    });
+
+    test('should size each column to its fraction of a 10 column grid', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-grid style="--ion-grid-columns: 10">
+            <ion-row>
+              <ion-col size="1">1</ion-col>
+              <ion-col size="3">3</ion-col>
+              <ion-col size="3">3</ion-col>
+              <ion-col size="2">2</ion-col>
+              <ion-col size="1">1</ion-col>
+            </ion-row>
+          </ion-grid>
+        `,
+        config
+      );
+
+      const { rowWidth, columns } = await page.locator('ion-row').evaluate((row) => {
+        const cols = Array.from(row.querySelectorAll('ion-col'));
+
+        return {
+          rowWidth: row.clientWidth,
+          columns: cols.map((col) => ({
+            size: Number(col.getAttribute('size')),
+            width: col.getBoundingClientRect().width,
+          })),
+        };
+      });
+
+      // The grid overrides columns to 10, so one column unit is rowWidth / 10
+      const columnUnit = rowWidth / 10;
+
+      for (const column of columns) {
+        expect(column.width).toBeCloseTo(columnUnit * column.size, 0);
+      }
     });
   });
 });
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-breakpoint-sizes-md-ltr-Mobile-Chrome-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-breakpoint-sizes-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ee4c3c0ce35
Binary files /dev/null and b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-breakpoint-sizes-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-breakpoint-sizes-md-ltr-Mobile-Firefox-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-breakpoint-sizes-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..fd25ea43076
Binary files /dev/null and b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-breakpoint-sizes-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-breakpoint-sizes-md-ltr-Mobile-Safari-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-breakpoint-sizes-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..77f503df099
Binary files /dev/null and b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-breakpoint-sizes-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-breakpoint-sizes-md-rtl-Mobile-Chrome-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-breakpoint-sizes-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..9495658c583
Binary files /dev/null and b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-breakpoint-sizes-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-breakpoint-sizes-md-rtl-Mobile-Firefox-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-breakpoint-sizes-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f33ecb26a06
Binary files /dev/null and b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-breakpoint-sizes-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-breakpoint-sizes-md-rtl-Mobile-Safari-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-breakpoint-sizes-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..6d08789fefc
Binary files /dev/null and b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-breakpoint-sizes-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-ltr-Mobile-Chrome-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 09c16d9e1ab..00000000000
Binary files a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-ltr-Mobile-Firefox-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index 41213501c0e..00000000000
Binary files a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-ltr-Mobile-Safari-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index c494d3c0568..00000000000
Binary files a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-rtl-Mobile-Chrome-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index f613b3dfdb8..00000000000
Binary files a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-rtl-Mobile-Firefox-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 652036aee9a..00000000000
Binary files a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-rtl-Mobile-Safari-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 6ef89a3a744..00000000000
Binary files a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-responsive-sm-md-ltr-Mobile-Chrome-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-responsive-sm-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..63a82ab124c
Binary files /dev/null and b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-responsive-sm-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-responsive-sm-md-ltr-Mobile-Firefox-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-responsive-sm-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b196d3256b0
Binary files /dev/null and b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-responsive-sm-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-responsive-sm-md-ltr-Mobile-Safari-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-responsive-sm-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..21db37ecc65
Binary files /dev/null and b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-responsive-sm-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-responsive-sm-md-rtl-Mobile-Chrome-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-responsive-sm-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..65170ad77e8
Binary files /dev/null and b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-responsive-sm-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-responsive-sm-md-rtl-Mobile-Firefox-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-responsive-sm-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a79ab3a44c0
Binary files /dev/null and b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-responsive-sm-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-responsive-sm-md-rtl-Mobile-Safari-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-responsive-sm-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..70b749dd113
Binary files /dev/null and b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-responsive-sm-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-size-auto-md-ltr-Mobile-Chrome-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-size-auto-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..104c3c8f7d1
Binary files /dev/null and b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-size-auto-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-size-auto-md-ltr-Mobile-Firefox-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-size-auto-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..bc642754601
Binary files /dev/null and b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-size-auto-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-size-auto-md-ltr-Mobile-Safari-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-size-auto-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..6e49a100cc0
Binary files /dev/null and b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-size-auto-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-size-auto-md-rtl-Mobile-Chrome-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-size-auto-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..bb38041af09
Binary files /dev/null and b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-size-auto-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-size-auto-md-rtl-Mobile-Firefox-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-size-auto-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..9e5b7cb15ef
Binary files /dev/null and b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-size-auto-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-size-auto-md-rtl-Mobile-Safari-linux.png b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-size-auto-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..66312840998
Binary files /dev/null and b/core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-size-auto-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/grid/test/sizes/index.html b/core/src/components/grid/test/sizes/index.html
index c2c4b682cfc..6c20d06a467 100644
--- a/core/src/components/grid/test/sizes/index.html
+++ b/core/src/components/grid/test/sizes/index.html
@@ -24,12 +24,12 @@
 
       <ion-content id="content" class="grid-demo">
         <h2 class="ion-padding-start">10 Column Layout</h2>
-        <ion-grid class="grid-10">
+        <ion-grid class="grid-10" id="ten-column-layout">
           <ion-row id="row10"></ion-row>
         </ion-grid>
 
         <h2 class="ion-padding-start">Responsive sm</h2>
-        <ion-grid>
+        <ion-grid id="responsive-sm">
           <ion-row>
             <ion-col size="12" size-sm>
               <div>ion-col</div>
@@ -47,7 +47,7 @@ <h2 class="ion-padding-start">Responsive sm</h2>
         </ion-grid>
 
         <h2 class="ion-padding-start">Size auto</h2>
-        <ion-grid>
+        <ion-grid id="size-auto">
           <ion-row>
             <ion-col>
               <div>ion-col</div>
@@ -65,39 +65,41 @@ <h2 class="ion-padding-start">Size auto</h2>
         </ion-grid>
 
         <h2 class="ion-padding-start">Breakpoint Sizes</h2>
-        <ion-grid>
-          <ion-row>
-            <ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
-              <div>ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"</div>
-            </ion-col>
-            <ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
-              <div>ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"</div>
-            </ion-col>
-            <ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
-              <div>ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"</div>
-            </ion-col>
-            <ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
-              <div>ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"</div>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
+        <div id="breakpoint-sizes">
+          <ion-grid>
+            <ion-row>
+              <ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
+                <div>ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"</div>
+              </ion-col>
+              <ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
+                <div>ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"</div>
+              </ion-col>
+              <ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
+                <div>ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"</div>
+              </ion-col>
+              <ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
+                <div>ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"</div>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
 
-        <ion-grid>
-          <ion-row>
-            <ion-col size="2">
-              <div>ion-col size="2"</div>
-            </ion-col>
-            <ion-col size="1">
-              <div>ion-col size="1"</div>
-            </ion-col>
-            <ion-col size="2">
-              <div>ion-col size="2"</div>
-            </ion-col>
-            <ion-col size="3">
-              <div>ion-col size="3"</div>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
+          <ion-grid>
+            <ion-row>
+              <ion-col size="2">
+                <div>ion-col size="2"</div>
+              </ion-col>
+              <ion-col size="1">
+                <div>ion-col size="1"</div>
+              </ion-col>
+              <ion-col size="2">
+                <div>ion-col size="2"</div>
+              </ion-col>
+              <ion-col size="3">
+                <div>ion-col size="3"</div>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+        </div>
       </ion-content>
 
       <script>
diff --git a/core/src/components/loading/test/basic/index.html b/core/src/components/loading/test/basic/index.html
index b7e2ec5c23d..01fa1d3d082 100644
--- a/core/src/components/loading/test/basic/index.html
+++ b/core/src/components/loading/test/basic/index.html
@@ -30,13 +30,15 @@
         color: #3478f6;
       }
 
-      f {
-        display: block;
-        background: blue;
+      .color-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 10px;
+        padding: 30px 10px;
+      }
 
-        width: 100%;
+      .color-block {
         height: 200px;
-        margin: 20px auto;
       }
 
       .red {
@@ -134,34 +136,16 @@
           Show Loading with HTML content
         </button>
 
-        <ion-grid>
-          <ion-row>
-            <ion-col size="6">
-              <f class="red"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="green"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="blue"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="yellow"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="pink"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="purple"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="black"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="orange"></f>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
+        <div class="color-grid">
+          <div class="color-block red"></div>
+          <div class="color-block green"></div>
+          <div class="color-block blue"></div>
+          <div class="color-block yellow"></div>
+          <div class="color-block pink"></div>
+          <div class="color-block purple"></div>
+          <div class="color-block black"></div>
+          <div class="color-block orange"></div>
+        </div>
       </ion-content>
     </ion-app>
     <script>
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-ltr-Mobile-Chrome-linux.png
index 8161bcc2c05..cfabf676701 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-ltr-Mobile-Firefox-linux.png
index bf9d068653a..247f607d77d 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-rtl-Mobile-Chrome-linux.png
index 501a548f062..274de14cff5 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-rtl-Mobile-Firefox-linux.png
index b59fdd956b7..b2b8e67581a 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-md-ltr-Mobile-Chrome-linux.png
index b2958208893..56ed1e69a69 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-md-ltr-Mobile-Firefox-linux.png
index 502e19ae2f5..abbf927964e 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-md-rtl-Mobile-Chrome-linux.png
index 6ab41c50a63..d530f5a68fa 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-md-rtl-Mobile-Firefox-linux.png
index 4363142e8a2..d90fec16b6f 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-ios-ltr-Mobile-Chrome-linux.png
index c2e7dd4233e..4fb9505a02a 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-ios-ltr-Mobile-Firefox-linux.png
index dab467e7bab..4dc27e23483 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-md-ltr-Mobile-Chrome-linux.png
index f44fe451ee2..4304a0bdf90 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-md-ltr-Mobile-Firefox-linux.png
index 92dc05aa54b..3eebfa58f8c 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-no-spinner-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-no-spinner-diff-ios-ltr-Mobile-Chrome-linux.png
index ddf51eb649a..23fe572bb39 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-no-spinner-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-no-spinner-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-no-spinner-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-no-spinner-diff-ios-ltr-Mobile-Firefox-linux.png
index b3d99a20e7d..89e6ab102ca 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-no-spinner-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-no-spinner-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-no-spinner-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-no-spinner-diff-md-ltr-Mobile-Chrome-linux.png
index c8dac08c034..8a2fee7844d 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-no-spinner-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-no-spinner-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-no-spinner-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-no-spinner-diff-md-ltr-Mobile-Firefox-linux.png
index 3f1d9351a1f..56b4cd2c046 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-no-spinner-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-no-spinner-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-translucent-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-translucent-diff-ios-ltr-Mobile-Chrome-linux.png
index ccb92923d8f..05353531798 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-translucent-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-translucent-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-translucent-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-translucent-diff-ios-ltr-Mobile-Firefox-linux.png
index 1c00441617b..f4bce5d755b 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-translucent-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-translucent-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/row/row.interface.ts b/core/src/components/row/row.interface.ts
new file mode 100644
index 00000000000..0e9fdfeeaa3
--- /dev/null
+++ b/core/src/components/row/row.interface.ts
@@ -0,0 +1,3 @@
+export type IonRowRecipe = {
+  gap?: string;
+};
diff --git a/core/src/components/row/row.scss b/core/src/components/row/row.scss
index be5ea84cf1f..2625a40ff7e 100644
--- a/core/src/components/row/row.scss
+++ b/core/src/components/row/row.scss
@@ -1,14 +1,14 @@
-@import "./row.vars";
-
-// Row
+// Row: Common Styles
 // --------------------------------------------------
+
 :host {
+  /**
+   * @prop --ion-row-gap: The gap between grid columns in the row
+   */
+
   display: flex;
 
   flex-wrap: wrap;
 
-  /**
-   * @prop --ion-grid-gap: The gap between grid items
-   */
-  gap: var(--ion-grid-gap, 0px);
+  gap: var(--ion-row-gap);
 }
diff --git a/core/src/components/row/row.tsx b/core/src/components/row/row.tsx
index 28e09695f4a..b4fee5a132c 100644
--- a/core/src/components/row/row.tsx
+++ b/core/src/components/row/row.tsx
@@ -1,11 +1,8 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, h } from '@stencil/core';
 
-import { getIonTheme } from '../../global/ionic-global';
-
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 @Component({
   tag: 'ion-row',
@@ -14,14 +11,8 @@ import { getIonTheme } from '../../global/ionic-global';
 })
 export class Row implements ComponentInterface {
   render() {
-    const theme = getIonTheme(this);
-
     return (
-      <Host
-        class={{
-          [theme]: true,
-        }}
-      >
+      <Host>
         <slot></slot>
       </Host>
     );
diff --git a/core/src/components/row/row.vars.scss b/core/src/components/row/row.vars.scss
deleted file mode 100644
index 98f5b2ea401..00000000000
--- a/core/src/components/row/row.vars.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import "../../themes/native/native.globals";
-@import "../grid/grid.mixins";
-
-// Row
-// --------------------------------------------------
diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Safari-linux.png
index 952630692ce..40d1d7119c8 100644
Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Safari-linux.png
index a0d63b6711e..52f70ce258c 100644
Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/themes/common.globals.scss b/core/src/themes/common.globals.scss
index d9bcbe89c23..ce5d6a47f29 100644
--- a/core/src/themes/common.globals.scss
+++ b/core/src/themes/common.globals.scss
@@ -3,6 +3,19 @@
 // Variables shared across all themes.
 // --------------------------------------------------
 
+// Default General
+// --------------------------------------------------
+
+// The minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries
+$screen-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+);
+
 // Z-Index
 // --------------------------------------------------
 $z-index-page-container: 0;
diff --git a/core/src/themes/ionic/default.tokens.ts b/core/src/themes/ionic/default.tokens.ts
index f9a6bdf0a02..600c00380e5 100644
--- a/core/src/themes/ionic/default.tokens.ts
+++ b/core/src/themes/ionic/default.tokens.ts
@@ -465,6 +465,55 @@ export const defaultTheme: DefaultTheme = {
       },
     },
 
+    IonCol: {
+      breakpoint: {
+        xs: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+        },
+
+        sm: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+        },
+
+        md: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+        },
+
+        lg: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+        },
+
+        xl: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+        },
+      },
+    },
+
     IonContent: {
       default: {
         background: baseColors.backgroundColor,
@@ -492,6 +541,67 @@ export const defaultTheme: DefaultTheme = {
       },
     },
 
+    IonGrid: {
+      breakpoint: {
+        xs: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+
+          width: '100%',
+        },
+
+        sm: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+
+          width: '540px',
+        },
+
+        md: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+
+          width: '720px',
+        },
+
+        lg: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+
+          width: '960px',
+        },
+
+        xl: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+
+          width: '1140px',
+        },
+      },
+
+      columns: 12,
+    },
+
     IonItemDivider: {
       background: baseColors.backgroundColor,
       color: `var(--ion-text-color-step-600, ${mix(baseColors.white, baseColors.black, '40%')})`,
@@ -761,6 +871,10 @@ export const defaultTheme: DefaultTheme = {
       },
     },
 
+    IonRow: {
+      gap: 'var(--ion-spacing-0)',
+    },
+
     IonSpinner: {
       color: '#626262',
 
diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts
index 673459d44d3..65da975615c 100644
--- a/core/src/themes/ios/default.tokens.ts
+++ b/core/src/themes/ios/default.tokens.ts
@@ -603,6 +603,55 @@ export const defaultTheme: DefaultTheme = {
       },
     },
 
+    IonCol: {
+      breakpoint: {
+        xs: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+        },
+
+        sm: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+        },
+
+        md: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+        },
+
+        lg: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+        },
+
+        xl: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+        },
+      },
+    },
+
     IonContent: {
       default: {
         background: baseColors.backgroundColor,
@@ -630,6 +679,67 @@ export const defaultTheme: DefaultTheme = {
       },
     },
 
+    IonGrid: {
+      breakpoint: {
+        xs: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+
+          width: '100%',
+        },
+
+        sm: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+
+          width: '540px',
+        },
+
+        md: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+
+          width: '720px',
+        },
+
+        lg: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+
+          width: '960px',
+        },
+
+        xl: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+
+          width: '1140px',
+        },
+      },
+
+      columns: 12,
+    },
+
     IonItemDivider: {
       background: `var(--ion-background-color-step-100, ${mix(baseColors.black, baseColors.white, '90%')})`,
       color: `var(--ion-text-color-step-150, ${mix(baseColors.white, baseColors.black, '85%')})`,
@@ -789,6 +899,10 @@ export const defaultTheme: DefaultTheme = {
       },
     },
 
+    IonRow: {
+      gap: 'var(--ion-spacing-0)',
+    },
+
     IonSpinner: {
       color: 'var(--ion-text-color, #000)',
 
diff --git a/core/src/themes/md/default.tokens.ts b/core/src/themes/md/default.tokens.ts
index f9411dc0429..3a92cacb7f6 100644
--- a/core/src/themes/md/default.tokens.ts
+++ b/core/src/themes/md/default.tokens.ts
@@ -606,6 +606,55 @@ export const defaultTheme: DefaultTheme = {
       },
     },
 
+    IonCol: {
+      breakpoint: {
+        xs: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+        },
+
+        sm: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+        },
+
+        md: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+        },
+
+        lg: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+        },
+
+        xl: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+        },
+      },
+    },
+
     IonContent: {
       default: {
         background: baseColors.backgroundColor,
@@ -633,6 +682,67 @@ export const defaultTheme: DefaultTheme = {
       },
     },
 
+    IonGrid: {
+      breakpoint: {
+        xs: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+
+          width: '100%',
+        },
+
+        sm: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+
+          width: '540px',
+        },
+
+        md: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+
+          width: '720px',
+        },
+
+        lg: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+
+          width: '960px',
+        },
+
+        xl: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+
+          width: '1140px',
+        },
+      },
+
+      columns: 12,
+    },
+
     IonItemDivider: {
       background: baseColors.backgroundColor,
       color: `var(--ion-text-color-step-600, ${mix(baseColors.white, baseColors.black, '40%')})`,
@@ -914,6 +1024,10 @@ export const defaultTheme: DefaultTheme = {
       },
     },
 
+    IonRow: {
+      gap: 'var(--ion-spacing-0)',
+    },
+
     IonSpinner: {
       color: 'var(--ion-text-color, #000)',
 
diff --git a/core/src/themes/themes.interfaces.ts b/core/src/themes/themes.interfaces.ts
index 65c291ad847..75e96039e25 100644
--- a/core/src/themes/themes.interfaces.ts
+++ b/core/src/themes/themes.interfaces.ts
@@ -1,8 +1,11 @@
 import type { IonBadgeConfig, IonBadgeRecipe } from '../components/badge/badge.interfaces';
 import type { IonChipConfig, IonChipRecipe } from '../components/chip/chip.interfaces';
+import type { IonColRecipe } from '../components/col/col.interface';
 import type { IonContentRecipe } from '../components/content/content.interfaces';
+import type { IonGridRecipe } from '../components/grid/grid.interface';
 import type { IonItemDividerRecipe } from '../components/item-divider/item-divider.interfaces';
 import type { IonProgressBarConfig, IonProgressBarRecipe } from '../components/progress-bar/progress-bar.interfaces';
+import type { IonRowRecipe } from '../components/row/row.interface';
 import type { IonSpinnerConfig, IonSpinnerRecipe } from '../components/spinner/spinner.interfaces';
 import type { IonTextConfig, IonTextRecipe } from '../components/text/text.interfaces';
 import type { IonThumbnailRecipe } from '../components/thumbnail/thumbnail.interfaces';
@@ -291,9 +294,12 @@ type Components = {
   IonAvatar?: any;
   IonBadge?: IonBadgeRecipe;
   IonChip?: IonChipRecipe;
+  IonCol?: IonColRecipe;
   IonContent?: IonContentRecipe;
+  IonGrid?: IonGridRecipe;
   IonItemDivider?: IonItemDividerRecipe;
   IonProgressBar?: IonProgressBarRecipe;
+  IonRow?: IonRowRecipe;
   IonSpinner?: IonSpinnerRecipe;
   IonText?: IonTextRecipe;
   IonThumbnail?: IonThumbnailRecipe;
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index 905779b92ca..73d727c59e2 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -572,14 +572,14 @@ export declare interface IonChip extends Components.IonChip {}
 
 
 @ProxyCmp({
-  inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'order', 'orderLg', 'orderMd', 'orderSm', 'orderXl', 'orderXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme']
+  inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'order', 'orderLg', 'orderMd', 'orderSm', 'orderXl', 'orderXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs']
 })
 @Component({
   selector: 'ion-col',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'order', 'orderLg', 'orderMd', 'orderSm', 'orderXl', 'orderXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme'],
+  inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'order', 'orderLg', 'orderMd', 'orderSm', 'orderXl', 'orderXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs'],
 })
 export class IonCol {
   protected el: HTMLIonColElement;
@@ -847,14 +847,14 @@ export declare interface IonGallery extends Components.IonGallery {}
 
 
 @ProxyCmp({
-  inputs: ['fixed', 'mode', 'theme']
+  inputs: ['fixed', 'mode']
 })
 @Component({
   selector: 'ion-grid',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['fixed', 'mode', 'theme'],
+  inputs: ['fixed', 'mode'],
 })
 export class IonGrid {
   protected el: HTMLIonGridElement;
@@ -2016,14 +2016,14 @@ export declare interface IonRippleEffect extends Components.IonRippleEffect {}
 
 
 @ProxyCmp({
-  inputs: ['mode', 'theme']
+  inputs: ['mode']
 })
 @Component({
   selector: 'ion-row',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['mode', 'theme'],
+  inputs: ['mode'],
 })
 export class IonRow {
   protected el: HTMLIonRowElement;
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index e561dc86ddf..6156dd36fc2 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -643,14 +643,14 @@ export declare interface IonChip extends Components.IonChip {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonCol,
-  inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'order', 'orderLg', 'orderMd', 'orderSm', 'orderXl', 'orderXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme']
+  inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'order', 'orderLg', 'orderMd', 'orderSm', 'orderXl', 'orderXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs']
 })
 @Component({
   selector: 'ion-col',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'order', 'orderLg', 'orderMd', 'orderSm', 'orderXl', 'orderXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme'],
+  inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'order', 'orderLg', 'orderMd', 'orderSm', 'orderXl', 'orderXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs'],
   standalone: true
 })
 export class IonCol {
@@ -891,14 +891,14 @@ export declare interface IonGallery extends Components.IonGallery {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonGrid,
-  inputs: ['fixed', 'mode', 'theme']
+  inputs: ['fixed', 'mode']
 })
 @Component({
   selector: 'ion-grid',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['fixed', 'mode', 'theme'],
+  inputs: ['fixed', 'mode'],
   standalone: true
 })
 export class IonGrid {
@@ -1884,14 +1884,14 @@ export declare interface IonRippleEffect extends Components.IonRippleEffect {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonRow,
-  inputs: ['mode', 'theme']
+  inputs: ['mode']
 })
 @Component({
   selector: 'ion-row',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['mode', 'theme'],
+  inputs: ['mode'],
   standalone: true
 })
 export class IonRow {