diff --git a/core/src/components/grid/test/basic/grid.e2e-legacy.ts b/core/src/components/grid/test/basic/grid.e2e-legacy.ts
deleted file mode 100644
index 89a98bde5e..0000000000
--- a/core/src/components/grid/test/basic/grid.e2e-legacy.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test('should not have visual regressions', async ({ page, skip }) => {
-  skip.mode('ios', 'ion-grid does not have different styling per-mode');
-  await page.goto(`/src/components/grid/test/basic`);
-
-  await page.setIonViewport();
-
-  await expect(page).toHaveScreenshot(`grid-basic-${page.getSnapshotSettings()}.png`);
-});
diff --git a/core/src/components/grid/test/basic/grid.e2e.ts b/core/src/components/grid/test/basic/grid.e2e.ts
new file mode 100644
index 0000000000..9b079b86c6
--- /dev/null
+++ b/core/src/components/grid/test/basic/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: basic'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/grid/test/basic`, config);
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`grid-basic`));
+    });
+  });
+});
diff --git a/core/src/components/grid/test/basic/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/basic/grid.e2e-legacy.ts-snapshots/grid-basic-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/grid/test/basic/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/basic/grid.e2e-legacy.ts-snapshots/grid-basic-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/grid/test/basic/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/basic/grid.e2e-legacy.ts-snapshots/grid-basic-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/grid/test/basic/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/basic/grid.e2e-legacy.ts-snapshots/grid-basic-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/grid/test/basic/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/basic/grid.e2e-legacy.ts-snapshots/grid-basic-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/grid/test/basic/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/basic/grid.e2e-legacy.ts-snapshots/grid-basic-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/grid/test/basic/grid.e2e.ts-snapshots/grid-basic-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/grid/test/offsets/grid.e2e-legacy.ts b/core/src/components/grid/test/offsets/grid.e2e-legacy.ts
deleted file mode 100644
index ec3163aa35..0000000000
--- a/core/src/components/grid/test/offsets/grid.e2e-legacy.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test('should not have visual regressions', async ({ page, skip }) => {
-  skip.mode('ios', 'ion-grid does not have different styling per-mode');
-  await page.goto(`/src/components/grid/test/offsets`);
-
-  await page.setIonViewport();
-
-  await expect(page).toHaveScreenshot(`grid-offsets-${page.getSnapshotSettings()}.png`);
-});
diff --git a/core/src/components/grid/test/offsets/grid.e2e.ts b/core/src/components/grid/test/offsets/grid.e2e.ts
new file mode 100644
index 0000000000..a8ae413602
--- /dev/null
+++ b/core/src/components/grid/test/offsets/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`, config);
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`grid-offsets`));
+    });
+  });
+});
diff --git a/core/src/components/grid/test/offsets/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/offsets/grid.e2e-legacy.ts-snapshots/grid-offsets-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/grid/test/offsets/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/offsets/grid.e2e-legacy.ts-snapshots/grid-offsets-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/grid/test/offsets/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/offsets/grid.e2e-legacy.ts-snapshots/grid-offsets-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/grid/test/offsets/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/offsets/grid.e2e-legacy.ts-snapshots/grid-offsets-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/grid/test/offsets/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/offsets/grid.e2e-legacy.ts-snapshots/grid-offsets-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/grid/test/offsets/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/offsets/grid.e2e-legacy.ts-snapshots/grid-offsets-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/grid/test/offsets/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/grid/test/padding/grid.e2e-legacy.ts b/core/src/components/grid/test/padding/grid.e2e-legacy.ts
deleted file mode 100644
index 43564bbad5..0000000000
--- a/core/src/components/grid/test/padding/grid.e2e-legacy.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test('should not have visual regressions', async ({ page, skip }) => {
-  skip.mode('ios', 'ion-grid does not have different styling per-mode');
-  await page.goto(`/src/components/grid/test/padding`);
-
-  await page.setIonViewport();
-
-  await expect(page).toHaveScreenshot(`grid-padding-${page.getSnapshotSettings()}.png`);
-});
diff --git a/core/src/components/grid/test/padding/grid.e2e.ts b/core/src/components/grid/test/padding/grid.e2e.ts
new file mode 100644
index 0000000000..71947ec4e8
--- /dev/null
+++ b/core/src/components/grid/test/padding/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: padding'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/grid/test/padding`, config);
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`grid-padding`));
+    });
+  });
+});
diff --git a/core/src/components/grid/test/padding/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/padding/grid.e2e-legacy.ts-snapshots/grid-padding-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/grid/test/padding/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/padding/grid.e2e-legacy.ts-snapshots/grid-padding-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/grid/test/padding/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/padding/grid.e2e-legacy.ts-snapshots/grid-padding-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/grid/test/padding/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/padding/grid.e2e-legacy.ts-snapshots/grid-padding-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/grid/test/padding/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/padding/grid.e2e-legacy.ts-snapshots/grid-padding-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/grid/test/padding/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/padding/grid.e2e-legacy.ts-snapshots/grid-padding-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/grid/test/padding/grid.e2e.ts-snapshots/grid-padding-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/grid/test/sizes/grid.e2e-legacy.ts b/core/src/components/grid/test/sizes/grid.e2e-legacy.ts
deleted file mode 100644
index a896fcbc81..0000000000
--- a/core/src/components/grid/test/sizes/grid.e2e-legacy.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test('should not have visual regressions', async ({ page, skip }) => {
-  skip.mode('ios', 'ion-grid does not have different styling per-mode');
-  await page.goto(`/src/components/grid/test/sizes`);
-
-  await page.setIonViewport();
-
-  await expect(page).toHaveScreenshot(`grid-sizes-${page.getSnapshotSettings()}.png`);
-});
diff --git a/core/src/components/grid/test/sizes/grid.e2e.ts b/core/src/components/grid/test/sizes/grid.e2e.ts
new file mode 100644
index 0000000000..0f03cb6050
--- /dev/null
+++ b/core/src/components/grid/test/sizes/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: sizes'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/grid/test/sizes`, config);
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`grid-sizes`));
+    });
+  });
+});
diff --git a/core/src/components/grid/test/sizes/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/sizes/grid.e2e-legacy.ts-snapshots/grid-sizes-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/grid/test/sizes/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/sizes/grid.e2e-legacy.ts-snapshots/grid-sizes-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/grid/test/sizes/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/sizes/grid.e2e-legacy.ts-snapshots/grid-sizes-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/grid/test/sizes/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/sizes/grid.e2e-legacy.ts-snapshots/grid-sizes-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/grid/test/sizes/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/sizes/grid.e2e-legacy.ts-snapshots/grid-sizes-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/grid/test/sizes/grid.e2e-legacy.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
similarity index 100%
rename from core/src/components/grid/test/sizes/grid.e2e-legacy.ts-snapshots/grid-sizes-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/grid/test/sizes/grid.e2e.ts-snapshots/grid-sizes-md-rtl-Mobile-Safari-linux.png