feat(grid): modernizing component (#30658)

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The existing grid component (`ion-grid`, `ion-row`, and `ion-col`) in
Ionic was developed several years ago and has not received significant
updates since then. As a result, it does not leverage modern CSS
features. For example, the gutter (spacing) between columns is
implemented using the border property, which is an outdated technique.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `--ion-grid-gap`: this new CSS variable, will indicate the gap size in
the grid. Defaults to `0px` - the current value.
- `ion-col`: has a new way to calculate the width of the column.
Additionally a new property `order` (and responsive variants) was added,
and will control the order of the column.
- `ion-row`: uses the newly introduced custom property `--ion-grid-gap`.
This property will indicate the gap size in the grid.

## Does this introduce a breaking change?
- [x] Yes
- [ ] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
The properties `pull` and `push` from `ion-col`, have been removed. The
functionality achieved with them, is now achieved with the new property
`order` and the existing `size`. More information and migration examples
can be read in `BREAKING.md` file.

## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Shane <shane@shanessite.net>

BREAKING.md

@@ -18,6 +18,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)
+  - [Grid](#version-9x-grid)
 
 <h2 id="version-9x-components">Components</h2>
 
@@ -32,3 +33,105 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 <h4 id="version-9x-chip">Chip</h4>
 
 - 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 `--border-radius` CSS variable to specify a different value.
+
+<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`.
+
+<h5>Example 1: Swap two columns</h5>
+
+**Version up to 8.x**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col push="4">1</ion-col>
+    <ion-col pull="4">2</ion-col>
+    <ion-col>3</ion-col>
+  </ion-row>
+</ion-grid>
+```
+**Version 9.x+**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col order="2">1</ion-col>
+    <ion-col order="1">2</ion-col>
+    <ion-col order="3">3</ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+<h5>Example 2: Reorder columns with specific sizes</h5>
+To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `size="3" pull="9"`:
+
+**Version up to 8.x**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col push="3">1</ion-col>
+    <ion-col pull="9">2</ion-col>
+  </ion-row>
+</ion-grid>
+```
+**Version 9.x+**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col order="2">1</ion-col>
+    <ion-col size="3" order="1">2</ion-col>
+  </ion-row>
+</ion-grid>
+```
+<h5>Example 3: Push</h5>
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col size="auto" push="1">
+      <div>ion-col push 1</div>
+    </ion-col>
+    <ion-col size="auto" push="1">
+      <div>ion-col push 1</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+**Version 9.x+**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col size="auto" offset="1">
+      <div>ion-col size="auto" offset="1"</div>
+    </ion-col>
+    <ion-col size="auto">
+      <div>ion-col size="auto"</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+<h5>Example 4: Push and Pull</h5>
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col size="3" size-md="6" push="9" push-md="6">
+      <div>ion-col size="3" size-md="6" push="9" push-md="6"</div>
+    </ion-col>
+    <ion-col size="9" size-md="6" pull="3" pull-md="6">
+      <div>ion-col size="9" size-md="6" pull="3" pull-md="6"</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+**Version 9.x+**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col size="auto" order="2" order-md="2">
+      <div>ion-col size="auto" order="2" order-md="2"</div>
+    </ion-col>
+    <ion-col size="auto" order="1" order-md="1">
+      <div>ion-col size="auto" order="1" order-md="1"</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```

core/api.txt

@@ -622,6 +622,12 @@ ion-col,prop,offsetMd,string | undefined,undefined,false,false
 ion-col,prop,offsetSm,string | undefined,undefined,false,false
 ion-col,prop,offsetXl,string | undefined,undefined,false,false
 ion-col,prop,offsetXs,string | undefined,undefined,false,false
+ion-col,prop,order,string | undefined,undefined,false,false
+ion-col,prop,orderLg,string | undefined,undefined,false,false
+ion-col,prop,orderMd,string | undefined,undefined,false,false
+ion-col,prop,orderSm,string | undefined,undefined,false,false
+ion-col,prop,orderXl,string | undefined,undefined,false,false
+ion-col,prop,orderXs,string | undefined,undefined,false,false
 ion-col,prop,pull,string | undefined,undefined,false,false
 ion-col,prop,pullLg,string | undefined,undefined,false,false
 ion-col,prop,pullMd,string | undefined,undefined,false,false
@@ -641,6 +647,7 @@ 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
@@ -2006,6 +2013,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-searchbar,scoped
 ion-searchbar,prop,animated,boolean,false,false,false

core/src/components.d.ts

@@ -927,52 +927,88 @@ export namespace Components {
           * The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.
          */
         "offsetXs"?: string;
+        /**
+          * The order of the column, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "order"?: string;
+        /**
+          * The order of the column for lg screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderLg"?: string;
+        /**
+          * The order of the column for md screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderMd"?: string;
+        /**
+          * The order of the column for sm screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderSm"?: string;
+        /**
+          * The order of the column for xl screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderXl"?: string;
+        /**
+          * The order of the column for xs screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderXs"?: string;
         /**
           * 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.
          */
         "pull"?: string;
         /**
           * 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.
          */
         "pullLg"?: string;
         /**
           * 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.
          */
         "pullMd"?: string;
         /**
           * 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.
          */
         "pullSm"?: string;
         /**
           * 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.
          */
         "pullXl"?: string;
         /**
           * 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.
          */
         "pullXs"?: string;
         /**
           * 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.
          */
         "push"?: string;
         /**
           * 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.
          */
         "pushLg"?: string;
         /**
           * 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.
          */
         "pushMd"?: string;
         /**
           * 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.
          */
         "pushSm"?: string;
         /**
           * 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.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushXl"?: string;
         /**
           * 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.
          */
         "pushXs"?: string;
         /**
@@ -6861,52 +6897,88 @@ declare namespace LocalJSX {
           * The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.
          */
         "offsetXs"?: string;
+        /**
+          * The order of the column, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "order"?: string;
+        /**
+          * The order of the column for lg screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderLg"?: string;
+        /**
+          * The order of the column for md screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderMd"?: string;
+        /**
+          * The order of the column for sm screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderSm"?: string;
+        /**
+          * The order of the column for xl screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderXl"?: string;
+        /**
+          * The order of the column for xs screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderXs"?: string;
         /**
           * 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.
          */
         "pull"?: string;
         /**
           * 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.
          */
         "pullLg"?: string;
         /**
           * 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.
          */
         "pullMd"?: string;
         /**
           * 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.
          */
         "pullSm"?: string;
         /**
           * 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.
          */
         "pullXl"?: string;
         /**
           * 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.
          */
         "pullXs"?: string;
         /**
           * 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.
          */
         "push"?: string;
         /**
           * 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.
          */
         "pushLg"?: string;
         /**
           * 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.
          */
         "pushMd"?: string;
         /**
           * 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.
          */
         "pushSm"?: string;
         /**
           * 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.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushXl"?: string;
         /**
           * 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.
          */
         "pushXs"?: string;
         /**

core/src/components/col/col.scss

@@ -4,6 +4,13 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --col-unit-size: The size of each Column unit.
+   */
+  --col-unit-size: calc(
+    (100% - (var(--ion-grid-columns, 12) - 1) * var(--ion-grid-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
@@ -20,10 +27,55 @@
 
   position: relative;
 
-  flex-basis: 0;
-  flex-grow: 1;
+  flex: 1;
 
-  width: 100%;
-  max-width: 100%;
   min-height: 1px; // Prevent columns from collapsing when empty
+
+  overflow: auto;
+}
+
+:host(.ion-grid-col-auto) {
+  flex: 0 0 auto;
+}
+
+:host([class^="ion-grid-col--"]),
+:host([class*=" ion-grid-col--"]) {
+  flex: 0 0
+    calc(var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-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)
+  );
+}
+
+: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))
+  );
+
+  @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};
+  }
 }

core/src/components/col/col.tsx

@@ -1,12 +1,11 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';
+import { Component, Element, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';
+import { printIonWarning } from '@utils/logging';
 import { matchBreakpoint } from '@utils/media';
 
 import { getIonTheme } from '../../global/ionic-global';
 
-const win = typeof (window as any) !== 'undefined' ? (window as any) : undefined;
 // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-const SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
 
 /**
@@ -19,6 +18,7 @@ const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
   shadow: true,
 })
 export class Col implements ComponentInterface {
+  @Element() el!: HTMLIonColElement;
   /**
    * The amount to offset the column, in terms of how many columns it should shift to the end
    * of the total available.
@@ -55,71 +55,112 @@ export class Col implements ComponentInterface {
    */
   @Prop() offsetXl?: string;
 
+  /**
+   * The order of the column, in terms of where the column should position itself in the columns renderer.
+   * If no value is passed, the column order implicit value will be the order in the html structure.
+   */
+  @Prop() order?: string;
+
+  /**
+   * The order of the column for xs screens, in terms of where the column should position itself in the columns renderer.
+   * If no value is passed, the column order implicit value will be the order in the html structure.
+   */
+  @Prop() orderXs?: string;
+
+  /**
+   * The order of the column for sm screens, in terms of where the column should position itself in the columns renderer.
+   * If no value is passed, the column order implicit value will be the order in the html structure.
+   */
+  @Prop() orderSm?: string;
+
+  /**
+   * The order of the column for md screens, in terms of where the column should position itself in the columns renderer.
+   * If no value is passed, the column order implicit value will be the order in the html structure.
+   */
+  @Prop() orderMd?: string;
+
+  /**
+   * The order of the column for lg screens, in terms of where the column should position itself in the columns renderer.
+   * If no value is passed, the column order implicit value will be the order in the html structure.
+   */
+  @Prop() orderLg?: string;
+
+  /**
+   * The order of the column for xl screens, in terms of where the column should position itself in the columns renderer.
+   * If no value is passed, the column order implicit value will be the order in the html structure.
+   */
+  @Prop() orderXl?: string;
+
   /**
    * 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;
-
   /**
    * 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;
   /**
    * 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;
   /**
    * 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;
   /**
    * 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;
   /**
    * 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;
-
   /**
    * 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;
-
   /**
    * 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;
-
   /**
    * 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;
-
   /**
    * 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;
-
   /**
    * 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;
-
   /**
    * 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.
+   * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
    */
   @Prop() pushXl?: string;
 
@@ -186,84 +227,78 @@ export class Col implements ComponentInterface {
     return matched;
   }
 
-  private calculateSize() {
-    const columns = this.getColumns('size');
+  private getStyleClass(property: string, className: string, acceptsAuto = false): string | 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>
-    if (!columns || columns === '') {
+    if (!colPropertyValue || colPropertyValue === '') {
       return;
     }
 
-    // If the size is set to auto then don't calculate a size
-    const colSize =
-      columns === 'auto'
-        ? 'auto'
-        : // If CSS supports variables we should use the grid columns var
-        SUPPORTS_VARS
-        ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
-        : // Convert the columns to a percentage by dividing by the total number
-          // of columns (12) and then multiplying by 100
-          (columns / 12) * 100 + '%';
+    if (acceptsAuto && colPropertyValue === 'auto') {
+      return 'ion-grid-col-auto';
+    }
 
-    return {
-      flex: `0 0 ${colSize}`,
-      width: `${colSize}`,
-      'max-width': `${colSize}`,
-    };
-  }
+    const valueNumber = parseInt(colPropertyValue);
 
-  // Called by push, pull, and offset since they use the same calculations
-  private calculatePosition(property: string, modifier: string) {
-    const columns = this.getColumns(property);
-
-    if (!columns) {
+    if (isNaN(valueNumber)) {
       return;
     }
 
-    // If the number of columns passed are greater than 0 and less than
-    // 12 we can position the column, else default to auto
-    const amount = SUPPORTS_VARS
-      ? // If CSS supports variables we should use the grid columns var
-        `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
-      : // Convert the columns to a percentage by dividing by the total number
-      // of columns (12) and then multiplying by 100
-      columns > 0 && columns < 12
-      ? (columns / 12) * 100 + '%'
-      : 'auto';
-
-    return {
-      [modifier]: amount,
-    };
+    return `${className}-col--${valueNumber}`;
   }
 
-  private calculateOffset(isRTL: boolean) {
-    return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');
+  private getSizeClass(): string | undefined {
+    return this.getStyleClass('size', 'ion-grid', true);
   }
 
-  private calculatePull(isRTL: boolean) {
-    return this.calculatePosition('pull', isRTL ? 'left' : 'right');
+  private getOrderClass(): string | undefined {
+    return this.getStyleClass('order', 'ion-grid-order');
   }
 
-  private calculatePush(isRTL: boolean) {
-    return this.calculatePosition('push', isRTL ? 'right' : 'left');
+  private getOffsetClass(): string | undefined {
+    return this.getStyleClass('offset', 'ion-grid-offset');
+  }
+
+  componentDidLoad() {
+    if (
+      this.pull ||
+      this.pullLg ||
+      this.pullMd ||
+      this.pullSm ||
+      this.pullXl ||
+      this.pullXs ||
+      this.push ||
+      this.pushLg ||
+      this.pushMd ||
+      this.pushSm ||
+      this.pushXl ||
+      this.pushXs
+    ) {
+      printIonWarning(
+        '[ion-col] - The pull and push properties are deprecated and no longer work, in favor of the order and size properties.',
+        this.el
+      );
+    }
   }
 
   render() {
-    const isRTL = document.dir === 'rtl';
     const theme = getIonTheme(this);
+
+    const colSize = this.getSizeClass();
+    const colOrder = this.getOrderClass();
+    const colOffset = this.getOffsetClass();
+
     return (
       <Host
         class={{
           [theme]: true,
-        }}
-        style={{
-          ...this.calculateOffset(isRTL),
-          ...this.calculatePull(isRTL),
-          ...this.calculatePush(isRTL),
-          ...this.calculateSize(),
+          [`${colSize}`]: colSize !== undefined,
+          [`${colOrder}`]: colOrder !== undefined,
+          [`${colOffset}`]: colOffset !== undefined,
         }}
       >
         <slot></slot>

core/src/components/grid/test/basic/index.html

@@ -211,6 +211,7 @@
         .grid-demo ion-col div {
           background-color: #f7f7f7;
           border: 1px solid #ddd;
+          font-size: 0.8em;
           padding: 10px 5px;
         }
       </style>

core/src/components/grid/test/offsets-pull-push/grid.e2e.ts

@@ -0,0 +1,17 @@
+import { expect } from '@playwright/test';
+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('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`));
+    });
+  });
+});

core/src/components/grid/test/offsets-pull-push/index.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Grid - Pull & Push</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 - Offsets</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="grid-demo">
+        <h2 class="ion-padding-start">Push</h2>
+        <ion-grid>
+          <ion-row>
+            <ion-col size="auto" push="1">
+              <div>ion-col push 1</div>
+            </ion-col>
+            <ion-col size="auto" push="1">
+              <div>ion-col push 1</div>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <h2 class="ion-padding-start">Push and Pull</h2>
+        <ion-grid>
+          <ion-row>
+            <ion-col size="9" push="3">
+              <div>ion-col push 3</div>
+            </ion-col>
+            <ion-col size="3" pull="9">
+              <div>ion-col pull 9</div>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <ion-grid>
+          <ion-row>
+            <ion-col size="3" size-md="6" push="9" push-md="6">
+              <div>ion-col size="3" size-md="6" push="9" push-md="6"</div>
+            </ion-col>
+            <ion-col size="9" size-md="6" pull="3" pull-md="6">
+              <div>ion-col size="9" size-md="6" pull="3" pull-md="6"</div>
+            </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;
+          border: 1px solid #ddd;
+          font-size: 0.8em;
+          padding: 10px 5px;
+        }
+      </style>
+    </ion-app>
+  </body>
+</html>

core/src/components/grid/test/offsets/index.html

@@ -23,37 +23,37 @@
       </ion-header>
 
       <ion-content id="content" class="grid-demo">
-        <h2 class="ion-padding-start">Push</h2>
+        <h2 class="ion-padding-start">Offset</h2>
         <ion-grid>
           <ion-row>
-            <ion-col size="auto" push="1">
-              <div>ion-col push 1</div>
+            <ion-col size="auto" offset="1">
+              <div>ion-col offset 1</div>
             </ion-col>
-            <ion-col size="auto" push="1">
-              <div>ion-col push 1</div>
+            <ion-col size="auto" offset="0">
+              <div>ion-col offset 0</div>
             </ion-col>
           </ion-row>
         </ion-grid>
 
-        <h2 class="ion-padding-start">Push and Pull</h2>
+        <h2 class="ion-padding-start">Order</h2>
         <ion-grid>
           <ion-row>
-            <ion-col size="9" push="3">
-              <div>ion-col push 3</div>
+            <ion-col size="9" order="2">
+              <div>ion-col order 2</div>
             </ion-col>
-            <ion-col size="3" pull="9">
-              <div>ion-col pull 9</div>
+            <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" push="9" push-md="6">
-              <div>ion-col size="3" size-md="6" push="9" push-md="6"</div>
+            <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" pull="3" pull-md="6">
-              <div>ion-col size="9" size-md="6" pull="3" pull-md="6"</div>
+            <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>
@@ -70,6 +70,7 @@
           </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">
@@ -88,8 +89,12 @@
         function updateOffset() {
           var dynamicOffsetCol = document.getElementById('dynamicOffsetCol');
           var currentOffset = dynamicOffsetCol.offset;
+          var currentOffsetMd = dynamicOffsetCol.offsetMd;
           dynamicOffsetCol.offset = currentOffset === '2' ? '4' : '2';
-          console.log('Updating offset from ' + currentOffset + ' to ' + dynamicOffsetCol.offset);
+          dynamicOffsetCol.offsetMd = currentOffsetMd === '5' ? '2' : '5';
+          console.log(
+            `Updating offset from ${currentOffset} to ${dynamicOffsetCol.offset} and offset-md from ${currentOffsetMd} to ${dynamicOffsetCol.offsetMd}`
+          );
         }
       </script>
 
@@ -97,6 +102,7 @@
         .grid-demo ion-col div {
           background-color: #f7f7f7;
           border: 1px solid #ddd;
+          font-size: 0.8em;
           padding: 10px 5px;
         }
       </style>

core/src/components/grid/test/padding/index.html

@@ -127,6 +127,7 @@
         .grid-demo ion-col div {
           background-color: #f7f7f7;
           border: 1px solid #ddd;
+          font-size: 0.8em;
           padding: 10px 5px;
         }
 

core/src/components/grid/test/sizes/index.html

@@ -124,6 +124,7 @@
         .grid-demo ion-col div {
           background-color: #f7f7f7;
           border: 1px solid #ddd;
+          font-size: 0.8em;
           padding: 10px 5px;
         }
 

core/src/components/row/row.scss

@@ -2,9 +2,13 @@
 
 // Row
 // --------------------------------------------------
-
 :host {
   display: flex;
 
   flex-wrap: wrap;
+
+  /**
+   * @prop --ion-grid-gap: The gap between grid items
+   */
+  gap: var(--ion-grid-gap, 0px);
 }

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', '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', 'theme']
 })
 @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', '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', 'theme'],
 })
 export class IonCol {
   protected el: HTMLIonColElement;

packages/angular/standalone/src/directives/proxies.ts

@@ -642,14 +642,14 @@ export declare interface IonChip extends Components.IonChip {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonCol,
-  inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', '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', 'theme']
 })
 @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', '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', 'theme'],
   standalone: true
 })
 export class IonCol {

packages/vue/src/proxies.ts

@@ -280,6 +280,12 @@ export const IonCol: StencilVueComponent<JSX.IonCol> = /*@__PURE__*/ defineConta
   'offsetMd',
   'offsetLg',
   'offsetXl',
+  'order',
+  'orderXs',
+  'orderSm',
+  'orderMd',
+  'orderLg',
+  'orderXl',
   'pull',
   'pullXs',
   'pullSm',