diff --git a/packages/renderer-parity.json b/packages/renderer-parity.json
index 2238e503e..3ae60bd0e 100644
--- a/packages/renderer-parity.json
+++ b/packages/renderer-parity.json
@@ -134,6 +134,8 @@
         "artisanpack/accordion-title",
         "artisanpack/accordion-body",
         "artisanpack/tabs",
-        "artisanpack/tab-section"
+        "artisanpack/tab-section",
+        "artisanpack/grid",
+        "artisanpack/grid-item"
     ]
 }
diff --git a/packages/visual-editor-renderer-blade/resources/assets/frontend/grid.css b/packages/visual-editor-renderer-blade/resources/assets/frontend/grid.css
new file mode 100644
index 000000000..78f27aacc
--- /dev/null
+++ b/packages/visual-editor-renderer-blade/resources/assets/frontend/grid.css
@@ -0,0 +1,312 @@
+/**
+ * Grid family styles (#498).
+ *
+ * Loaded in the editor via `blocks/{grid,grid-item}/index.ts`. On the
+ * public frontend the Blade renderer serves an identical copy from
+ * `packages/visual-editor-renderer-blade/resources/assets/frontend/grid.css`,
+ * wired up by `<x-ve-blocks-styles />`. React and Vue renderers emit
+ * the same class names so a single stylesheet covers all three.
+ *
+ * Per-breakpoint column count and item span are encoded as static
+ * classes — `ap-grid-has-N-{bp}-columns`, `ap-grid-item-span-N-{bp}-columns`,
+ * `ap-grid-item-span-N-{bp}-row` — and emitted by the renderers on each
+ * instance. Mobile-first cascade: base rules first, then each registered
+ * Tailwind breakpoint (sm 640, md 768, lg 1024, xl 1280, 2xl 1536) in
+ * ascending min-width order, so a later breakpoint's class overrides the
+ * earlier one for the wider viewport.
+ */
+
+.ap-grid {
+    display: grid;
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    height: 100%;
+}
+
+.ap-grid-item {
+    display: flex;
+    flex-grow: 1;
+    min-width: 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+}
+
+.ap-grid-item > * {
+    width: 100%;
+}
+
+.ap-grid-item.ap-grid-item-layout-normal {
+    align-items: stretch;
+    justify-content: flex-start;
+}
+
+.ap-grid-item.ap-grid-item-layout-equal {
+    align-items: stretch;
+    justify-content: space-between;
+    flex-direction: column;
+}
+
+.ap-grid-item.ap-grid-item-layout-center {
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.ap-grid-item.ap-grid-item-layout-bottom {
+    flex-direction: column;
+    justify-content: flex-end;
+}
+
+.ap-grid-item.ap-grid-item-layout-last-bottom {
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+/* === base (no media query) === */
+.ap-grid.ap-grid-has-1-base-columns { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-2-base-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-3-base-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-4-base-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-5-base-columns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-6-base-columns { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-7-base-columns { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-8-base-columns { grid-template-columns: repeat(8, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-9-base-columns { grid-template-columns: repeat(9, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-10-base-columns { grid-template-columns: repeat(10, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-11-base-columns { grid-template-columns: repeat(11, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-12-base-columns { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+.ap-grid-item.ap-grid-item-span-1-base-columns { grid-column: span 1; }
+.ap-grid-item.ap-grid-item-span-2-base-columns { grid-column: span 2; }
+.ap-grid-item.ap-grid-item-span-3-base-columns { grid-column: span 3; }
+.ap-grid-item.ap-grid-item-span-4-base-columns { grid-column: span 4; }
+.ap-grid-item.ap-grid-item-span-5-base-columns { grid-column: span 5; }
+.ap-grid-item.ap-grid-item-span-6-base-columns { grid-column: span 6; }
+.ap-grid-item.ap-grid-item-span-7-base-columns { grid-column: span 7; }
+.ap-grid-item.ap-grid-item-span-8-base-columns { grid-column: span 8; }
+.ap-grid-item.ap-grid-item-span-9-base-columns { grid-column: span 9; }
+.ap-grid-item.ap-grid-item-span-10-base-columns { grid-column: span 10; }
+.ap-grid-item.ap-grid-item-span-11-base-columns { grid-column: span 11; }
+.ap-grid-item.ap-grid-item-span-12-base-columns { grid-column: span 12; }
+
+.ap-grid-item.ap-grid-item-span-1-base-row { grid-row: span 1; }
+.ap-grid-item.ap-grid-item-span-2-base-row { grid-row: span 2; }
+.ap-grid-item.ap-grid-item-span-3-base-row { grid-row: span 3; }
+.ap-grid-item.ap-grid-item-span-4-base-row { grid-row: span 4; }
+.ap-grid-item.ap-grid-item-span-5-base-row { grid-row: span 5; }
+.ap-grid-item.ap-grid-item-span-6-base-row { grid-row: span 6; }
+.ap-grid-item.ap-grid-item-span-7-base-row { grid-row: span 7; }
+.ap-grid-item.ap-grid-item-span-8-base-row { grid-row: span 8; }
+.ap-grid-item.ap-grid-item-span-9-base-row { grid-row: span 9; }
+.ap-grid-item.ap-grid-item-span-10-base-row { grid-row: span 10; }
+.ap-grid-item.ap-grid-item-span-11-base-row { grid-row: span 11; }
+.ap-grid-item.ap-grid-item-span-12-base-row { grid-row: span 12; }
+
+/* === sm: 640px === */
+@media (min-width: 640px) {
+    .ap-grid.ap-grid-has-1-sm-columns { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-2-sm-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-3-sm-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-4-sm-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-5-sm-columns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-6-sm-columns { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-7-sm-columns { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-8-sm-columns { grid-template-columns: repeat(8, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-9-sm-columns { grid-template-columns: repeat(9, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-10-sm-columns { grid-template-columns: repeat(10, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-11-sm-columns { grid-template-columns: repeat(11, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-12-sm-columns { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+    .ap-grid-item.ap-grid-item-span-1-sm-columns { grid-column: span 1; }
+    .ap-grid-item.ap-grid-item-span-2-sm-columns { grid-column: span 2; }
+    .ap-grid-item.ap-grid-item-span-3-sm-columns { grid-column: span 3; }
+    .ap-grid-item.ap-grid-item-span-4-sm-columns { grid-column: span 4; }
+    .ap-grid-item.ap-grid-item-span-5-sm-columns { grid-column: span 5; }
+    .ap-grid-item.ap-grid-item-span-6-sm-columns { grid-column: span 6; }
+    .ap-grid-item.ap-grid-item-span-7-sm-columns { grid-column: span 7; }
+    .ap-grid-item.ap-grid-item-span-8-sm-columns { grid-column: span 8; }
+    .ap-grid-item.ap-grid-item-span-9-sm-columns { grid-column: span 9; }
+    .ap-grid-item.ap-grid-item-span-10-sm-columns { grid-column: span 10; }
+    .ap-grid-item.ap-grid-item-span-11-sm-columns { grid-column: span 11; }
+    .ap-grid-item.ap-grid-item-span-12-sm-columns { grid-column: span 12; }
+
+    .ap-grid-item.ap-grid-item-span-1-sm-row { grid-row: span 1; }
+    .ap-grid-item.ap-grid-item-span-2-sm-row { grid-row: span 2; }
+    .ap-grid-item.ap-grid-item-span-3-sm-row { grid-row: span 3; }
+    .ap-grid-item.ap-grid-item-span-4-sm-row { grid-row: span 4; }
+    .ap-grid-item.ap-grid-item-span-5-sm-row { grid-row: span 5; }
+    .ap-grid-item.ap-grid-item-span-6-sm-row { grid-row: span 6; }
+    .ap-grid-item.ap-grid-item-span-7-sm-row { grid-row: span 7; }
+    .ap-grid-item.ap-grid-item-span-8-sm-row { grid-row: span 8; }
+    .ap-grid-item.ap-grid-item-span-9-sm-row { grid-row: span 9; }
+    .ap-grid-item.ap-grid-item-span-10-sm-row { grid-row: span 10; }
+    .ap-grid-item.ap-grid-item-span-11-sm-row { grid-row: span 11; }
+    .ap-grid-item.ap-grid-item-span-12-sm-row { grid-row: span 12; }
+}
+
+/* === md: 768px === */
+@media (min-width: 768px) {
+    .ap-grid.ap-grid-has-1-md-columns { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-2-md-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-3-md-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-4-md-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-5-md-columns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-6-md-columns { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-7-md-columns { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-8-md-columns { grid-template-columns: repeat(8, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-9-md-columns { grid-template-columns: repeat(9, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-10-md-columns { grid-template-columns: repeat(10, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-11-md-columns { grid-template-columns: repeat(11, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-12-md-columns { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+    .ap-grid-item.ap-grid-item-span-1-md-columns { grid-column: span 1; }
+    .ap-grid-item.ap-grid-item-span-2-md-columns { grid-column: span 2; }
+    .ap-grid-item.ap-grid-item-span-3-md-columns { grid-column: span 3; }
+    .ap-grid-item.ap-grid-item-span-4-md-columns { grid-column: span 4; }
+    .ap-grid-item.ap-grid-item-span-5-md-columns { grid-column: span 5; }
+    .ap-grid-item.ap-grid-item-span-6-md-columns { grid-column: span 6; }
+    .ap-grid-item.ap-grid-item-span-7-md-columns { grid-column: span 7; }
+    .ap-grid-item.ap-grid-item-span-8-md-columns { grid-column: span 8; }
+    .ap-grid-item.ap-grid-item-span-9-md-columns { grid-column: span 9; }
+    .ap-grid-item.ap-grid-item-span-10-md-columns { grid-column: span 10; }
+    .ap-grid-item.ap-grid-item-span-11-md-columns { grid-column: span 11; }
+    .ap-grid-item.ap-grid-item-span-12-md-columns { grid-column: span 12; }
+
+    .ap-grid-item.ap-grid-item-span-1-md-row { grid-row: span 1; }
+    .ap-grid-item.ap-grid-item-span-2-md-row { grid-row: span 2; }
+    .ap-grid-item.ap-grid-item-span-3-md-row { grid-row: span 3; }
+    .ap-grid-item.ap-grid-item-span-4-md-row { grid-row: span 4; }
+    .ap-grid-item.ap-grid-item-span-5-md-row { grid-row: span 5; }
+    .ap-grid-item.ap-grid-item-span-6-md-row { grid-row: span 6; }
+    .ap-grid-item.ap-grid-item-span-7-md-row { grid-row: span 7; }
+    .ap-grid-item.ap-grid-item-span-8-md-row { grid-row: span 8; }
+    .ap-grid-item.ap-grid-item-span-9-md-row { grid-row: span 9; }
+    .ap-grid-item.ap-grid-item-span-10-md-row { grid-row: span 10; }
+    .ap-grid-item.ap-grid-item-span-11-md-row { grid-row: span 11; }
+    .ap-grid-item.ap-grid-item-span-12-md-row { grid-row: span 12; }
+}
+
+/* === lg: 1024px === */
+@media (min-width: 1024px) {
+    .ap-grid.ap-grid-has-1-lg-columns { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-2-lg-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-3-lg-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-4-lg-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-5-lg-columns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-6-lg-columns { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-7-lg-columns { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-8-lg-columns { grid-template-columns: repeat(8, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-9-lg-columns { grid-template-columns: repeat(9, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-10-lg-columns { grid-template-columns: repeat(10, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-11-lg-columns { grid-template-columns: repeat(11, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-12-lg-columns { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+    .ap-grid-item.ap-grid-item-span-1-lg-columns { grid-column: span 1; }
+    .ap-grid-item.ap-grid-item-span-2-lg-columns { grid-column: span 2; }
+    .ap-grid-item.ap-grid-item-span-3-lg-columns { grid-column: span 3; }
+    .ap-grid-item.ap-grid-item-span-4-lg-columns { grid-column: span 4; }
+    .ap-grid-item.ap-grid-item-span-5-lg-columns { grid-column: span 5; }
+    .ap-grid-item.ap-grid-item-span-6-lg-columns { grid-column: span 6; }
+    .ap-grid-item.ap-grid-item-span-7-lg-columns { grid-column: span 7; }
+    .ap-grid-item.ap-grid-item-span-8-lg-columns { grid-column: span 8; }
+    .ap-grid-item.ap-grid-item-span-9-lg-columns { grid-column: span 9; }
+    .ap-grid-item.ap-grid-item-span-10-lg-columns { grid-column: span 10; }
+    .ap-grid-item.ap-grid-item-span-11-lg-columns { grid-column: span 11; }
+    .ap-grid-item.ap-grid-item-span-12-lg-columns { grid-column: span 12; }
+
+    .ap-grid-item.ap-grid-item-span-1-lg-row { grid-row: span 1; }
+    .ap-grid-item.ap-grid-item-span-2-lg-row { grid-row: span 2; }
+    .ap-grid-item.ap-grid-item-span-3-lg-row { grid-row: span 3; }
+    .ap-grid-item.ap-grid-item-span-4-lg-row { grid-row: span 4; }
+    .ap-grid-item.ap-grid-item-span-5-lg-row { grid-row: span 5; }
+    .ap-grid-item.ap-grid-item-span-6-lg-row { grid-row: span 6; }
+    .ap-grid-item.ap-grid-item-span-7-lg-row { grid-row: span 7; }
+    .ap-grid-item.ap-grid-item-span-8-lg-row { grid-row: span 8; }
+    .ap-grid-item.ap-grid-item-span-9-lg-row { grid-row: span 9; }
+    .ap-grid-item.ap-grid-item-span-10-lg-row { grid-row: span 10; }
+    .ap-grid-item.ap-grid-item-span-11-lg-row { grid-row: span 11; }
+    .ap-grid-item.ap-grid-item-span-12-lg-row { grid-row: span 12; }
+}
+
+/* === xl: 1280px === */
+@media (min-width: 1280px) {
+    .ap-grid.ap-grid-has-1-xl-columns { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-2-xl-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-3-xl-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-4-xl-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-5-xl-columns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-6-xl-columns { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-7-xl-columns { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-8-xl-columns { grid-template-columns: repeat(8, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-9-xl-columns { grid-template-columns: repeat(9, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-10-xl-columns { grid-template-columns: repeat(10, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-11-xl-columns { grid-template-columns: repeat(11, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-12-xl-columns { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+    .ap-grid-item.ap-grid-item-span-1-xl-columns { grid-column: span 1; }
+    .ap-grid-item.ap-grid-item-span-2-xl-columns { grid-column: span 2; }
+    .ap-grid-item.ap-grid-item-span-3-xl-columns { grid-column: span 3; }
+    .ap-grid-item.ap-grid-item-span-4-xl-columns { grid-column: span 4; }
+    .ap-grid-item.ap-grid-item-span-5-xl-columns { grid-column: span 5; }
+    .ap-grid-item.ap-grid-item-span-6-xl-columns { grid-column: span 6; }
+    .ap-grid-item.ap-grid-item-span-7-xl-columns { grid-column: span 7; }
+    .ap-grid-item.ap-grid-item-span-8-xl-columns { grid-column: span 8; }
+    .ap-grid-item.ap-grid-item-span-9-xl-columns { grid-column: span 9; }
+    .ap-grid-item.ap-grid-item-span-10-xl-columns { grid-column: span 10; }
+    .ap-grid-item.ap-grid-item-span-11-xl-columns { grid-column: span 11; }
+    .ap-grid-item.ap-grid-item-span-12-xl-columns { grid-column: span 12; }
+
+    .ap-grid-item.ap-grid-item-span-1-xl-row { grid-row: span 1; }
+    .ap-grid-item.ap-grid-item-span-2-xl-row { grid-row: span 2; }
+    .ap-grid-item.ap-grid-item-span-3-xl-row { grid-row: span 3; }
+    .ap-grid-item.ap-grid-item-span-4-xl-row { grid-row: span 4; }
+    .ap-grid-item.ap-grid-item-span-5-xl-row { grid-row: span 5; }
+    .ap-grid-item.ap-grid-item-span-6-xl-row { grid-row: span 6; }
+    .ap-grid-item.ap-grid-item-span-7-xl-row { grid-row: span 7; }
+    .ap-grid-item.ap-grid-item-span-8-xl-row { grid-row: span 8; }
+    .ap-grid-item.ap-grid-item-span-9-xl-row { grid-row: span 9; }
+    .ap-grid-item.ap-grid-item-span-10-xl-row { grid-row: span 10; }
+    .ap-grid-item.ap-grid-item-span-11-xl-row { grid-row: span 11; }
+    .ap-grid-item.ap-grid-item-span-12-xl-row { grid-row: span 12; }
+}
+
+/* === 2xl: 1536px === */
+@media (min-width: 1536px) {
+    .ap-grid.ap-grid-has-1-2xl-columns { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-2-2xl-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-3-2xl-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-4-2xl-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-5-2xl-columns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-6-2xl-columns { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-7-2xl-columns { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-8-2xl-columns { grid-template-columns: repeat(8, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-9-2xl-columns { grid-template-columns: repeat(9, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-10-2xl-columns { grid-template-columns: repeat(10, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-11-2xl-columns { grid-template-columns: repeat(11, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-12-2xl-columns { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+    .ap-grid-item.ap-grid-item-span-1-2xl-columns { grid-column: span 1; }
+    .ap-grid-item.ap-grid-item-span-2-2xl-columns { grid-column: span 2; }
+    .ap-grid-item.ap-grid-item-span-3-2xl-columns { grid-column: span 3; }
+    .ap-grid-item.ap-grid-item-span-4-2xl-columns { grid-column: span 4; }
+    .ap-grid-item.ap-grid-item-span-5-2xl-columns { grid-column: span 5; }
+    .ap-grid-item.ap-grid-item-span-6-2xl-columns { grid-column: span 6; }
+    .ap-grid-item.ap-grid-item-span-7-2xl-columns { grid-column: span 7; }
+    .ap-grid-item.ap-grid-item-span-8-2xl-columns { grid-column: span 8; }
+    .ap-grid-item.ap-grid-item-span-9-2xl-columns { grid-column: span 9; }
+    .ap-grid-item.ap-grid-item-span-10-2xl-columns { grid-column: span 10; }
+    .ap-grid-item.ap-grid-item-span-11-2xl-columns { grid-column: span 11; }
+    .ap-grid-item.ap-grid-item-span-12-2xl-columns { grid-column: span 12; }
+
+    .ap-grid-item.ap-grid-item-span-1-2xl-row { grid-row: span 1; }
+    .ap-grid-item.ap-grid-item-span-2-2xl-row { grid-row: span 2; }
+    .ap-grid-item.ap-grid-item-span-3-2xl-row { grid-row: span 3; }
+    .ap-grid-item.ap-grid-item-span-4-2xl-row { grid-row: span 4; }
+    .ap-grid-item.ap-grid-item-span-5-2xl-row { grid-row: span 5; }
+    .ap-grid-item.ap-grid-item-span-6-2xl-row { grid-row: span 6; }
+    .ap-grid-item.ap-grid-item-span-7-2xl-row { grid-row: span 7; }
+    .ap-grid-item.ap-grid-item-span-8-2xl-row { grid-row: span 8; }
+    .ap-grid-item.ap-grid-item-span-9-2xl-row { grid-row: span 9; }
+    .ap-grid-item.ap-grid-item-span-10-2xl-row { grid-row: span 10; }
+    .ap-grid-item.ap-grid-item-span-11-2xl-row { grid-row: span 11; }
+    .ap-grid-item.ap-grid-item-span-12-2xl-row { grid-row: span 12; }
+}
diff --git a/packages/visual-editor-renderer-blade/resources/views/blocks/artisanpack/grid-item.blade.php b/packages/visual-editor-renderer-blade/resources/views/blocks/artisanpack/grid-item.blade.php
new file mode 100644
index 000000000..4eb140077
--- /dev/null
+++ b/packages/visual-editor-renderer-blade/resources/views/blocks/artisanpack/grid-item.blade.php
@@ -0,0 +1,75 @@
+@php
+	use ArtisanPackUI\VisualEditor\Responsive\BreakpointRegistry;
+	use ArtisanPackUI\VisualEditorRendererBlade\Support\BlockSupports;
+
+	$validInnerLayouts = [ 'normal', 'equal', 'center', 'bottom', 'last-bottom' ];
+
+	$clampSpan = static function ( $value, int $fallback = 1 ): int {
+		$int = is_numeric( $value ) ? (int) $value : $fallback;
+		if ( $int < 1 ) {
+			return 1;
+		}
+		if ( $int > 12 ) {
+			return 12;
+		}
+		return $int;
+	};
+
+	$innerLayoutRaw = is_string( $attributes['innerLayout'] ?? null )
+		? $attributes['innerLayout']
+		: 'normal';
+	$innerLayout = in_array( $innerLayoutRaw, $validInnerLayouts, true )
+		? $innerLayoutRaw
+		: 'normal';
+
+	$baseColumnSpan = $clampSpan( $attributes['gridColumnSpan'] ?? null, 1 );
+	$baseRowSpan    = $clampSpan( $attributes['gridRowSpan'] ?? null, 1 );
+
+	$spanClasses = [
+		'ap-grid-item-span-' . $baseColumnSpan . '-base-columns',
+		'ap-grid-item-span-' . $baseRowSpan . '-base-row',
+	];
+
+	$registry = app( BreakpointRegistry::class );
+
+	$collectOverrides = static function ( $overrides, string $suffix, int $base, callable $clamp ) use ( $registry ): array {
+		$classes = [];
+
+		if ( ! is_array( $overrides ) ) {
+			return $classes;
+		}
+
+		foreach ( $overrides as $bp => $value ) {
+			if ( BreakpointRegistry::BASE_KEY === $bp ) {
+				continue;
+			}
+			if ( ! is_numeric( $value ) ) {
+				continue;
+			}
+			if ( null === $registry->get( (string) $bp ) ) {
+				continue;
+			}
+
+			$classes[] = 'ap-grid-item-span-' . $clamp( $value, $base ) . '-' . $bp . '-' . $suffix;
+		}
+
+		return $classes;
+	};
+
+	$spanClasses = array_merge(
+		$spanClasses,
+		$collectOverrides( $attributes['responsive']['gridColumnSpan'] ?? null, 'columns', $baseColumnSpan, $clampSpan ),
+		$collectOverrides( $attributes['responsive']['gridRowSpan'] ?? null, 'row', $baseRowSpan, $clampSpan ),
+	);
+
+	$baseClasses = array_merge(
+		[
+			'ap-grid-item',
+			'ap-grid-item-layout-' . $innerLayout,
+		],
+		$spanClasses,
+	);
+@endphp
+<div{!! BlockSupports::wrapperAttrs( $attributes, $baseClasses ) !!}>
+	{!! $innerBlocksHtml !!}
+</div>
diff --git a/packages/visual-editor-renderer-blade/resources/views/blocks/artisanpack/grid.blade.php b/packages/visual-editor-renderer-blade/resources/views/blocks/artisanpack/grid.blade.php
new file mode 100644
index 000000000..34dc7f014
--- /dev/null
+++ b/packages/visual-editor-renderer-blade/resources/views/blocks/artisanpack/grid.blade.php
@@ -0,0 +1,48 @@
+@php
+	use ArtisanPackUI\VisualEditor\Responsive\BreakpointRegistry;
+	use ArtisanPackUI\VisualEditorRendererBlade\Support\BlockSupports;
+
+	$clampColumns = static function ( $value, int $fallback ): int {
+		$int = is_numeric( $value ) ? (int) $value : $fallback;
+		if ( $int < 1 ) {
+			return 1;
+		}
+		if ( $int > 12 ) {
+			return 12;
+		}
+		return $int;
+	};
+
+	$baseColumns = $clampColumns( $attributes['numColumns'] ?? null, 4 );
+
+	// Per-breakpoint overrides. Mobile-first CSS cascade handles the rest:
+	// emit `ap-grid-has-N-{bp}-columns` for every breakpoint that carries
+	// its own value. Ascending min-width ordering in grid.css means a
+	// later breakpoint's class wins for the wider viewport.
+	$breakpointClasses = [ 'ap-grid-has-' . $baseColumns . '-base-columns' ];
+
+	$responsiveColumns = $attributes['responsive']['numColumns'] ?? [];
+
+	if ( is_array( $responsiveColumns ) ) {
+		$registry = app( BreakpointRegistry::class );
+
+		foreach ( $responsiveColumns as $bp => $value ) {
+			if ( BreakpointRegistry::BASE_KEY === $bp ) {
+				continue;
+			}
+			if ( ! is_numeric( $value ) ) {
+				continue;
+			}
+			if ( null === $registry->get( (string) $bp ) ) {
+				continue;
+			}
+
+			$breakpointClasses[] = 'ap-grid-has-' . $clampColumns( $value, $baseColumns ) . '-' . $bp . '-columns';
+		}
+	}
+
+	$baseClasses = array_merge( [ 'ap-grid' ], $breakpointClasses );
+@endphp
+<div{!! BlockSupports::wrapperAttrs( $attributes, $baseClasses ) !!}>
+	{!! $innerBlocksHtml !!}
+</div>
diff --git a/packages/visual-editor-renderer-blade/resources/views/components/blocks-styles.blade.php b/packages/visual-editor-renderer-blade/resources/views/components/blocks-styles.blade.php
index 90238212d..ab7342640 100644
--- a/packages/visual-editor-renderer-blade/resources/views/components/blocks-styles.blade.php
+++ b/packages/visual-editor-renderer-blade/resources/views/components/blocks-styles.blade.php
@@ -7,6 +7,10 @@
 <link rel="stylesheet" href="{{ $tabsStyleHref }}" data-ve-tabs>
 <script src="{{ $interactivityScriptSrc }}" defer data-ve-interactivity></script>
 @endif
+{{-- Grid family CSS is layout-only (no interactivity script), so it
+	loads independently of $emitInteractive. Hosts that opt out of
+	accordion/tabs interactivity still want grid blocks to render. --}}
+<link rel="stylesheet" href="{{ $gridStyleHref }}" data-ve-grid>
 @if( '' !== $themeTokensCss )
 <style data-ve-theme-tokens>{!! $themeTokensCss !!}</style>
 @endif
diff --git a/packages/visual-editor-renderer-blade/src/View/Components/BlocksStylesComponent.php b/packages/visual-editor-renderer-blade/src/View/Components/BlocksStylesComponent.php
index 678f346aa..de861b99a 100644
--- a/packages/visual-editor-renderer-blade/src/View/Components/BlocksStylesComponent.php
+++ b/packages/visual-editor-renderer-blade/src/View/Components/BlocksStylesComponent.php
@@ -61,6 +61,8 @@ class BlocksStylesComponent extends Component
 
 	public string $tabsStyleHref;
 
+	public string $gridStyleHref;
+
 	public string $interactivityScriptSrc;
 
 	public bool $emitBlockLibrary;
@@ -93,6 +95,7 @@ public function __construct(
 		$this->themeHref              = $base . '/theme.css';
 		$this->accordionStyleHref     = $base . '/frontend/accordion.css';
 		$this->tabsStyleHref          = $base . '/frontend/tabs.css';
+		$this->gridStyleHref          = $base . '/frontend/grid.css';
 		$this->interactivityScriptSrc = $base . '/frontend/interactivity.js';
 		$this->emitBlockLibrary       = $bundle;
 		$this->emitInteractive        = $interactive;
diff --git a/packages/visual-editor-renderer-blade/tests/Feature/Responsive/GridResponsiveRenderTest.php b/packages/visual-editor-renderer-blade/tests/Feature/Responsive/GridResponsiveRenderTest.php
new file mode 100644
index 000000000..d65541fa2
--- /dev/null
+++ b/packages/visual-editor-renderer-blade/tests/Feature/Responsive/GridResponsiveRenderTest.php
@@ -0,0 +1,85 @@
+<?php
+
+declare( strict_types=1 );
+
+use ArtisanPackUI\VisualEditorRendererBlade\Services\ResponsiveCssAccumulator;
+use Illuminate\Support\Facades\Blade;
+
+beforeEach( function (): void {
+	app( ResponsiveCssAccumulator::class )->reset();
+} );
+
+it( 'emits per-breakpoint grid column classes on the wrapper from attributes.responsive.numColumns', function () {
+	$tree = [
+		[
+			'clientId'   => 'grid-1',
+			'name'       => 'artisanpack/grid',
+			'attributes' => [
+				'numColumns' => 1,
+				'responsive' => [
+					'numColumns' => [
+						'md' => 2,
+						'lg' => 4,
+					],
+				],
+			],
+			'innerBlocks' => [],
+		],
+	];
+
+	$rendered = $this->stripGlobalStyles( Blade::render( '<x-ve-blocks :tree="$tree" />', [ 'tree' => $tree ] ) );
+
+	expect( $rendered )->toContain( 'ap-grid-has-1-base-columns' )
+		->and( $rendered )->toContain( 'ap-grid-has-2-md-columns' )
+		->and( $rendered )->toContain( 'ap-grid-has-4-lg-columns' )
+		// Static-class approach: no accumulated <style data-ve-responsive>
+		// block is emitted just for the grid family.
+		->and( $rendered )->not->toContain( '<style data-ve-responsive>' );
+} );
+
+it( 'emits per-breakpoint span classes on grid-item from responsive.gridColumnSpan and gridRowSpan', function () {
+	$tree = [
+		[
+			'clientId'   => 'item-1',
+			'name'       => 'artisanpack/grid-item',
+			'attributes' => [
+				'gridColumnSpan' => 1,
+				'gridRowSpan'    => 1,
+				'responsive'     => [
+					'gridColumnSpan' => [ 'md' => 2, 'lg' => 3 ],
+					'gridRowSpan'    => [ 'md' => 2 ],
+				],
+			],
+			'innerBlocks' => [],
+		],
+	];
+
+	$rendered = $this->stripGlobalStyles( Blade::render( '<x-ve-blocks :tree="$tree" />', [ 'tree' => $tree ] ) );
+
+	expect( $rendered )->toContain( 'ap-grid-item-span-1-base-columns' )
+		->and( $rendered )->toContain( 'ap-grid-item-span-1-base-row' )
+		->and( $rendered )->toContain( 'ap-grid-item-span-2-md-columns' )
+		->and( $rendered )->toContain( 'ap-grid-item-span-3-lg-columns' )
+		->and( $rendered )->toContain( 'ap-grid-item-span-2-md-row' );
+} );
+
+it( 'skips overrides at unknown breakpoints', function () {
+	$tree = [
+		[
+			'clientId'   => 'grid-1',
+			'name'       => 'artisanpack/grid',
+			'attributes' => [
+				'numColumns' => 2,
+				'responsive' => [
+					'numColumns' => [ 'orphan' => 6 ],
+				],
+			],
+			'innerBlocks' => [],
+		],
+	];
+
+	$rendered = $this->stripGlobalStyles( Blade::render( '<x-ve-blocks :tree="$tree" />', [ 'tree' => $tree ] ) );
+
+	expect( $rendered )->toContain( 'ap-grid-has-2-base-columns' )
+		->and( $rendered )->not->toContain( '-orphan-' );
+} );
diff --git a/packages/visual-editor-renderer-blade/tests/Unit/BlockRendererTest.php b/packages/visual-editor-renderer-blade/tests/Unit/BlockRendererTest.php
index f7b09464f..4ff82f7b3 100644
--- a/packages/visual-editor-renderer-blade/tests/Unit/BlockRendererTest.php
+++ b/packages/visual-editor-renderer-blade/tests/Unit/BlockRendererTest.php
@@ -777,6 +777,131 @@ public function render( array $attrs )
 		->and( $html )->toContain( 'Naked' );
 } );
 
+it( 'renders an artisanpack/grid tree with per-breakpoint column + span classes', function () {
+	$tree = [
+		makeBlock( 'artisanpack/grid', [
+			'numColumns' => 4,
+		], [
+			makeBlock( 'artisanpack/grid-item', [
+				'innerLayout'    => 'center',
+				'gridColumnSpan' => 2,
+				'gridRowSpan'    => 1,
+			], [
+				makeBlock( 'core/paragraph', [ 'content' => 'Cell content' ], [], 'p-1' ),
+			], 'item-1' ),
+		] ),
+	];
+
+	$html = makeRenderer()->render( $tree );
+
+	expect( $html )->toContain( 'ap-grid' )
+		->and( $html )->toContain( 'ap-grid-has-4-base-columns' )
+		->and( $html )->toContain( 'ap-grid-item' )
+		->and( $html )->toContain( 'ap-grid-item-layout-center' )
+		->and( $html )->toContain( 'ap-grid-item-span-2-base-columns' )
+		->and( $html )->toContain( 'ap-grid-item-span-1-base-row' )
+		->and( $html )->toContain( 'Cell content' );
+} );
+
+it( 'emits an `ap-grid-has-N-{bp}-columns` class for every responsive.numColumns override', function () {
+	$tree = [
+		makeBlock( 'artisanpack/grid', [
+			'numColumns' => 1,
+			'responsive' => [
+				'numColumns' => [
+					'md' => 2,
+					'lg' => 4,
+				],
+			],
+		] ),
+	];
+
+	$html = makeRenderer()->render( $tree );
+
+	expect( $html )->toContain( 'ap-grid-has-1-base-columns' )
+		->and( $html )->toContain( 'ap-grid-has-2-md-columns' )
+		->and( $html )->toContain( 'ap-grid-has-4-lg-columns' );
+} );
+
+it( 'clamps grid column counts outside 1-12 to safe defaults', function () {
+	$tooHigh = [
+		makeBlock( 'artisanpack/grid', [ 'numColumns' => 99 ] ),
+	];
+	$tooLow = [
+		makeBlock( 'artisanpack/grid', [ 'numColumns' => 0 ] ),
+	];
+
+	expect( makeRenderer()->render( $tooHigh ) )->toContain( 'ap-grid-has-12-base-columns' );
+	expect( makeRenderer()->render( $tooLow ) )->toContain( 'ap-grid-has-1-base-columns' );
+} );
+
+it( 'emits per-breakpoint grid-item span classes for both columns and rows', function () {
+	$tree = [
+		makeBlock( 'artisanpack/grid-item', [
+			'gridColumnSpan' => 1,
+			'gridRowSpan'    => 1,
+			'responsive'     => [
+				'gridColumnSpan' => [ 'md' => 2, 'lg' => 3 ],
+				'gridRowSpan'    => [ 'md' => 2 ],
+			],
+		] ),
+	];
+
+	$html = makeRenderer()->render( $tree );
+
+	expect( $html )->toContain( 'ap-grid-item-span-1-base-columns' )
+		->and( $html )->toContain( 'ap-grid-item-span-1-base-row' )
+		->and( $html )->toContain( 'ap-grid-item-span-2-md-columns' )
+		->and( $html )->toContain( 'ap-grid-item-span-3-lg-columns' )
+		->and( $html )->toContain( 'ap-grid-item-span-2-md-row' );
+} );
+
+it( 'skips numColumns / span overrides at unknown breakpoints', function () {
+	$tree = [
+		makeBlock( 'artisanpack/grid', [
+			'numColumns' => 2,
+			'responsive' => [ 'numColumns' => [ 'orphan' => 6 ] ],
+		] ),
+	];
+
+	$html = makeRenderer()->render( $tree );
+
+	expect( $html )->toContain( 'ap-grid-has-2-base-columns' )
+		->and( $html )->not->toContain( 'orphan-columns' )
+		->and( $html )->not->toContain( '-orphan-' );
+} );
+
+it( 'falls back to a safe default when grid-item innerLayout is invalid', function () {
+	$tree = [
+		makeBlock( 'artisanpack/grid-item', [
+			'innerLayout' => 'evil"><script>',
+		] ),
+	];
+
+	$html = makeRenderer()->render( $tree );
+
+	expect( $html )->toContain( 'ap-grid-item-layout-normal' )
+		->and( $html )->not->toContain( '<script>' )
+		->and( $html )->not->toContain( 'ap-grid-item-layout-evil' );
+} );
+
+it( 'compiles spacing.blockGap with horizontal/vertical sides into row-gap + column-gap', function () {
+	$tree = [
+		makeBlock( 'artisanpack/grid', [
+			'style' => [
+				'spacing' => [
+					'blockGap' => [ 'top' => '2rem', 'left' => '1rem' ],
+				],
+			],
+		] ),
+	];
+
+	$html = makeRenderer()->render( $tree );
+
+	expect( $html )->toContain( 'row-gap: 2rem' )
+		->and( $html )->toContain( 'column-gap: 1rem' );
+} );
+
 describe( 'Keystone #50 — block-supports compilation on the rendered HTML', function (): void {
 	it( 'renders a custom background color on core/group as both class marker and inline style', function (): void {
 		$tree = [ makeBlock( 'core/group', [
diff --git a/packages/visual-editor-renderer-react/src/blocks/artisanpack/grid.tsx b/packages/visual-editor-renderer-react/src/blocks/artisanpack/grid.tsx
new file mode 100644
index 000000000..519d4cad6
--- /dev/null
+++ b/packages/visual-editor-renderer-react/src/blocks/artisanpack/grid.tsx
@@ -0,0 +1,112 @@
+/**
+ * React renderers for the `artisanpack/grid` family (#498). Mirrors the
+ * Blade partials and Vue components so every renderer emits identical
+ * markup.
+ *
+ * Per-breakpoint column count + item span are encoded as static classes
+ * (`ap-grid-has-N-{bp}-columns`, `ap-grid-item-span-N-{bp}-{columns|row}`)
+ * keyed on the Tailwind-style breakpoint registry (base / sm / md / lg /
+ * xl / 2xl). The matching media-query rules ship in `grid.css`; mobile-
+ * first cascade picks the active breakpoint's class at runtime.
+ */
+
+import type { JSX, ReactNode } from 'react';
+
+import { attrInt, attrRecord, attrString, classList } from '../../support/attributes';
+import type { BlockRendererProps } from '../../types';
+
+const BREAKPOINTS: ReadonlyArray<string> = ['sm', 'md', 'lg', 'xl', '2xl'];
+
+type GridItemInnerLayout = 'normal' | 'equal' | 'center' | 'bottom' | 'last-bottom';
+
+const VALID_INNER_LAYOUTS: ReadonlyArray<GridItemInnerLayout> = [
+    'normal',
+    'equal',
+    'center',
+    'bottom',
+    'last-bottom',
+];
+
+function clampInt(value: unknown, min: number, max: number, fallback: number): number {
+    const parsed = attrInt(value, fallback);
+    if (parsed < min) {
+        return min;
+    }
+    if (parsed > max) {
+        return max;
+    }
+    return parsed;
+}
+
+function normalizeInnerLayout(value: unknown): GridItemInnerLayout {
+    const raw = attrString(value, 'normal');
+    return (VALID_INNER_LAYOUTS as ReadonlyArray<string>).includes(raw)
+        ? (raw as GridItemInnerLayout)
+        : 'normal';
+}
+
+function responsiveSpanClasses(
+    overrides: Record<string, unknown>,
+    suffix: 'columns' | 'row',
+    prefix: 'ap-grid-has' | 'ap-grid-item-span'
+): string[] {
+    const classes: string[] = [];
+
+    for (const bp of BREAKPOINTS) {
+        const raw = overrides[bp];
+        if (raw === undefined || raw === null) {
+            continue;
+        }
+
+        // Validate raw is a parseable finite number BEFORE clamping —
+        // otherwise non-numeric values like 'evil' silently snap to the
+        // clamp min (1) and emit a bogus `ap-grid-*-1-{bp}-…` class.
+        const numeric = typeof raw === 'number' ? raw : Number(raw);
+        if (!Number.isFinite(numeric)) {
+            continue;
+        }
+
+        const value = clampInt(numeric, 1, 12, 1);
+        classes.push(`${prefix}-${value}-${bp}-${suffix}`);
+    }
+
+    return classes;
+}
+
+export function GridBlock({ attributes, children }: BlockRendererProps): JSX.Element {
+    const baseColumns = clampInt(attributes.numColumns, 1, 12, 4);
+    const responsive = attrRecord(attributes.responsive);
+    const responsiveColumns = attrRecord(responsive.numColumns);
+    const className = attrString(attributes.className);
+
+    const classes = classList([
+        'ap-grid',
+        `ap-grid-has-${baseColumns}-base-columns`,
+        ...responsiveSpanClasses(responsiveColumns, 'columns', 'ap-grid-has'),
+        className,
+    ]);
+
+    return <div className={classes}>{children as ReactNode}</div>;
+}
+
+export function GridItemBlock({ attributes, children }: BlockRendererProps): JSX.Element {
+    const innerLayout = normalizeInnerLayout(attributes.innerLayout);
+    const baseColumnSpan = clampInt(attributes.gridColumnSpan, 1, 12, 1);
+    const baseRowSpan = clampInt(attributes.gridRowSpan, 1, 12, 1);
+    const responsive = attrRecord(attributes.responsive);
+    const responsiveColumnSpan = attrRecord(responsive.gridColumnSpan);
+    const responsiveRowSpan = attrRecord(responsive.gridRowSpan);
+    const className = attrString(attributes.className);
+
+    const classes = classList([
+        'ap-grid-item',
+        `ap-grid-item-layout-${innerLayout}`,
+        `ap-grid-item-span-${baseColumnSpan}-base-columns`,
+        `ap-grid-item-span-${baseRowSpan}-base-row`,
+        ...responsiveSpanClasses(responsiveColumnSpan, 'columns', 'ap-grid-item-span'),
+        ...responsiveSpanClasses(responsiveRowSpan, 'row', 'ap-grid-item-span'),
+        className,
+    ]);
+
+    return <div className={classes}>{children as ReactNode}</div>;
+}
diff --git a/packages/visual-editor-renderer-react/src/blocks/registerCoreBlocks.ts b/packages/visual-editor-renderer-react/src/blocks/registerCoreBlocks.ts
index bfe5aae41..8dfce1fd8 100644
--- a/packages/visual-editor-renderer-react/src/blocks/registerCoreBlocks.ts
+++ b/packages/visual-editor-renderer-react/src/blocks/registerCoreBlocks.ts
@@ -20,6 +20,7 @@ import {
 } from './artisanpack/accordion';
 import { BreadcrumbsBlock } from './artisanpack/breadcrumbs';
 import { CalloutBlock } from './artisanpack/callout';
+import { GridBlock, GridItemBlock } from './artisanpack/grid';
 import { TabSectionBlock, TabsBlock } from './artisanpack/tabs';
 import { LoginoutBlock } from './artisanpack/loginout';
 import {
@@ -228,6 +229,11 @@ const CORE_BLOCKS: Record<string, BlockRenderer> = {
     'artisanpack/accordion-body': AccordionBodyBlock,
     'artisanpack/tabs': TabsBlock,
     'artisanpack/tab-section': TabSectionBlock,
+    // Grid family (#498). Parent grid owns the responsive column count
+    // classes + inline gap declarations; each grid item owns its
+    // per-breakpoint span classes and inner-layout flex class.
+    'artisanpack/grid': GridBlock,
+    'artisanpack/grid-item': GridItemBlock,
     // Post navigation / metadata family (#520) — same renderer for both
     // namespaces; PostResolver stamps the same `_resolved*` attributes.
     'core/post-navigation-link': PostNavigationLinkBlock,
diff --git a/packages/visual-editor-renderer-react/tests/BlockTree.test.tsx b/packages/visual-editor-renderer-react/tests/BlockTree.test.tsx
index c3f5aab2d..db2d9ee0d 100644
--- a/packages/visual-editor-renderer-react/tests/BlockTree.test.tsx
+++ b/packages/visual-editor-renderer-react/tests/BlockTree.test.tsx
@@ -879,6 +879,120 @@ describe('Core design blocks', () => {
         expect(html).not.toContain('aria-labelledby=');
         expect(html).toContain('Naked');
     });
+
+    it('renders an artisanpack/grid tree with per-breakpoint column + span classes', () => {
+        const tree = [
+            makeBlock(
+                'artisanpack/grid',
+                { numColumns: 4 },
+                [
+                    makeBlock(
+                        'artisanpack/grid-item',
+                        {
+                            innerLayout: 'center',
+                            gridColumnSpan: 2,
+                            gridRowSpan: 1,
+                        },
+                        [makeBlock('core/paragraph', { content: 'Cell content' })]
+                    ),
+                ]
+            ),
+        ];
+
+        const html = renderTree(tree);
+
+        expect(html).toContain('ap-grid');
+        expect(html).toContain('ap-grid-has-4-base-columns');
+        expect(html).toContain('ap-grid-item');
+        expect(html).toContain('ap-grid-item-layout-center');
+        expect(html).toContain('ap-grid-item-span-2-base-columns');
+        expect(html).toContain('ap-grid-item-span-1-base-row');
+        expect(html).toContain('Cell content');
+    });
+
+    it('emits per-breakpoint grid column classes from responsive.numColumns', () => {
+        const html = renderTree([
+            makeBlock('artisanpack/grid', {
+                numColumns: 1,
+                responsive: { numColumns: { md: 2, lg: 4 } },
+            }),
+        ]);
+
+        expect(html).toContain('ap-grid-has-1-base-columns');
+        expect(html).toContain('ap-grid-has-2-md-columns');
+        expect(html).toContain('ap-grid-has-4-lg-columns');
+    });
+
+    it('emits per-breakpoint span classes from responsive.gridColumnSpan / gridRowSpan', () => {
+        const html = renderTree([
+            makeBlock('artisanpack/grid-item', {
+                gridColumnSpan: 1,
+                gridRowSpan: 1,
+                responsive: {
+                    gridColumnSpan: { md: 2, lg: 3 },
+                    gridRowSpan: { md: 2 },
+                },
+            }),
+        ]);
+
+        expect(html).toContain('ap-grid-item-span-1-base-columns');
+        expect(html).toContain('ap-grid-item-span-1-base-row');
+        expect(html).toContain('ap-grid-item-span-2-md-columns');
+        expect(html).toContain('ap-grid-item-span-3-lg-columns');
+        expect(html).toContain('ap-grid-item-span-2-md-row');
+    });
+
+    it('clamps grid column counts outside 1-12 to safe defaults', () => {
+        const tooHigh = renderTree([
+            makeBlock('artisanpack/grid', { numColumns: 99 }),
+        ]);
+        const tooLow = renderTree([
+            makeBlock('artisanpack/grid', { numColumns: 0 }),
+        ]);
+
+        expect(tooHigh).toContain('ap-grid-has-12-base-columns');
+        expect(tooLow).toContain('ap-grid-has-1-base-columns');
+    });
+
+    it('clamps grid-item spans outside 1-12 to safe defaults', () => {
+        const tooHigh = renderTree([
+            makeBlock('artisanpack/grid-item', {
+                gridColumnSpan: 99,
+                gridRowSpan: 0,
+            }),
+        ]);
+
+        expect(tooHigh).toContain('ap-grid-item-span-12-base-columns');
+        expect(tooHigh).toContain('ap-grid-item-span-1-base-row');
+    });
+
+    it('skips non-numeric responsive.numColumns overrides instead of clamping them to 1', () => {
+        const html = renderTree([
+            makeBlock('artisanpack/grid', {
+                numColumns: 3,
+                responsive: { numColumns: { md: 'evil', lg: 4 } },
+            }),
+        ]);
+
+        expect(html).toContain('ap-grid-has-3-base-columns');
+        expect(html).not.toContain('ap-grid-has-1-md-columns');
+        expect(html).not.toContain('md-columns');
+        expect(html).toContain('ap-grid-has-4-lg-columns');
+    });
+
+    it('falls back to a safe default when grid-item innerLayout is invalid', () => {
+        const tree = [
+            makeBlock('artisanpack/grid-item', {
+                innerLayout: 'evil"><script>',
+            }),
+        ];
+
+        const html = renderTree(tree);
+
+        expect(html).toContain('ap-grid-item-layout-normal');
+        expect(html).not.toContain('<script>');
+        expect(html).not.toContain('ap-grid-item-layout-evil');
+    });
 });
 
 describe('Registry + dynamic fallback', () => {
diff --git a/packages/visual-editor-renderer-vue/src/blocks/artisanpack/grid.ts b/packages/visual-editor-renderer-vue/src/blocks/artisanpack/grid.ts
new file mode 100644
index 000000000..774c4a56d
--- /dev/null
+++ b/packages/visual-editor-renderer-vue/src/blocks/artisanpack/grid.ts
@@ -0,0 +1,132 @@
+/**
+ * Vue renderers for the `artisanpack/grid` family (#498). Mirrors the
+ * Blade partials and React renderers so every environment emits identical
+ * markup.
+ *
+ * Per-breakpoint column count + item span are encoded as static classes
+ * (`ap-grid-has-N-{bp}-columns`, `ap-grid-item-span-N-{bp}-{columns|row}`)
+ * keyed on the Tailwind-style breakpoint registry (base / sm / md / lg /
+ * xl / 2xl). The matching media-query rules ship in `grid.css`; mobile-
+ * first cascade picks the active breakpoint's class at runtime.
+ */
+
+import { defineComponent, h } from 'vue';
+
+import { attrInt, attrRecord, attrString, classList } from '../../support/attributes';
+import { blockRendererProps } from '../shared';
+
+const BREAKPOINTS: ReadonlyArray<string> = ['sm', 'md', 'lg', 'xl', '2xl'];
+
+type GridItemInnerLayout = 'normal' | 'equal' | 'center' | 'bottom' | 'last-bottom';
+
+const VALID_INNER_LAYOUTS: ReadonlyArray<GridItemInnerLayout> = [
+    'normal',
+    'equal',
+    'center',
+    'bottom',
+    'last-bottom',
+];
+
+function clampInt(value: unknown, min: number, max: number, fallback: number): number {
+    const parsed = attrInt(value, fallback);
+    if (parsed < min) {
+        return min;
+    }
+    if (parsed > max) {
+        return max;
+    }
+    return parsed;
+}
+
+function normalizeInnerLayout(value: unknown): GridItemInnerLayout {
+    const raw = attrString(value, 'normal');
+    return (VALID_INNER_LAYOUTS as ReadonlyArray<string>).includes(raw)
+        ? (raw as GridItemInnerLayout)
+        : 'normal';
+}
+
+function responsiveSpanClasses(
+    overrides: Record<string, unknown>,
+    suffix: 'columns' | 'row',
+    prefix: 'ap-grid-has' | 'ap-grid-item-span'
+): string[] {
+    const classes: string[] = [];
+
+    for (const bp of BREAKPOINTS) {
+        const raw = overrides[bp];
+        if (raw === undefined || raw === null) {
+            continue;
+        }
+
+        // Validate raw is a parseable finite number BEFORE clamping —
+        // otherwise non-numeric values like 'evil' silently snap to the
+        // clamp min (1) and emit a bogus `ap-grid-*-1-{bp}-…` class.
+        const numeric = typeof raw === 'number' ? raw : Number(raw);
+        if (!Number.isFinite(numeric)) {
+            continue;
+        }
+
+        const value = clampInt(numeric, 1, 12, 1);
+        classes.push(`${prefix}-${value}-${bp}-${suffix}`);
+    }
+
+    return classes;
+}
+
+export const GridBlock = defineComponent({
+    name: 'GridBlock',
+    props: blockRendererProps,
+    setup(props, { slots }) {
+        return () => {
+            const baseColumns = clampInt(props.attributes.numColumns, 1, 12, 4);
+            const responsive = attrRecord(props.attributes.responsive);
+            const responsiveColumns = attrRecord(responsive.numColumns);
+            const className = attrString(props.attributes.className);
+
+            const classes = classList([
+                'ap-grid',
+                `ap-grid-has-${baseColumns}-base-columns`,
+                ...responsiveSpanClasses(responsiveColumns, 'columns', 'ap-grid-has'),
+                className,
+            ]);
+
+            return h(
+                'div',
+                { class: classes },
+                slots.default ? slots.default() : []
+            );
+        };
+    },
+});
+
+export const GridItemBlock = defineComponent({
+    name: 'GridItemBlock',
+    props: blockRendererProps,
+    setup(props, { slots }) {
+        return () => {
+            const innerLayout = normalizeInnerLayout(props.attributes.innerLayout);
+            const baseColumnSpan = clampInt(props.attributes.gridColumnSpan, 1, 12, 1);
+            const baseRowSpan = clampInt(props.attributes.gridRowSpan, 1, 12, 1);
+            const responsive = attrRecord(props.attributes.responsive);
+            const responsiveColumnSpan = attrRecord(responsive.gridColumnSpan);
+            const responsiveRowSpan = attrRecord(responsive.gridRowSpan);
+            const className = attrString(props.attributes.className);
+
+            const classes = classList([
+                'ap-grid-item',
+                `ap-grid-item-layout-${innerLayout}`,
+                `ap-grid-item-span-${baseColumnSpan}-base-columns`,
+                `ap-grid-item-span-${baseRowSpan}-base-row`,
+                ...responsiveSpanClasses(responsiveColumnSpan, 'columns', 'ap-grid-item-span'),
+                ...responsiveSpanClasses(responsiveRowSpan, 'row', 'ap-grid-item-span'),
+                className,
+            ]);
+
+            return h(
+                'div',
+                { class: classes },
+                slots.default ? slots.default() : []
+            );
+        };
+    },
+});
diff --git a/packages/visual-editor-renderer-vue/src/blocks/registerCoreBlocks.ts b/packages/visual-editor-renderer-vue/src/blocks/registerCoreBlocks.ts
index e34931b1b..ffc998acd 100644
--- a/packages/visual-editor-renderer-vue/src/blocks/registerCoreBlocks.ts
+++ b/packages/visual-editor-renderer-vue/src/blocks/registerCoreBlocks.ts
@@ -20,6 +20,7 @@ import {
 } from './artisanpack/accordion';
 import { BreadcrumbsBlock } from './artisanpack/breadcrumbs';
 import { CalloutBlock } from './artisanpack/callout';
+import { GridBlock, GridItemBlock } from './artisanpack/grid';
 import { TabSectionBlock, TabsBlock } from './artisanpack/tabs';
 import { LoginoutBlock } from './artisanpack/loginout';
 import {
@@ -228,6 +229,11 @@ const CORE_BLOCKS: Record<string, BlockRenderer> = {
     'artisanpack/accordion-body': AccordionBodyBlock,
     'artisanpack/tabs': TabsBlock,
     'artisanpack/tab-section': TabSectionBlock,
+    // Grid family (#498). Parent grid owns the responsive column count
+    // classes + inline gap declarations; each grid item owns its
+    // per-breakpoint span classes and inner-layout flex class.
+    'artisanpack/grid': GridBlock,
+    'artisanpack/grid-item': GridItemBlock,
     // Post navigation / metadata family (#520) — same renderer for both
     // namespaces; PostResolver stamps the same `_resolved*` attributes.
     'core/post-navigation-link': PostNavigationLinkBlock,
diff --git a/packages/visual-editor-renderer-vue/tests/BlockTree.test.ts b/packages/visual-editor-renderer-vue/tests/BlockTree.test.ts
index cea8c64a8..b7821f6aa 100644
--- a/packages/visual-editor-renderer-vue/tests/BlockTree.test.ts
+++ b/packages/visual-editor-renderer-vue/tests/BlockTree.test.ts
@@ -878,6 +878,120 @@ describe('Core design blocks', () => {
         expect(html).not.toContain('aria-labelledby=');
         expect(html).toContain('Naked');
     });
+
+    it('renders an artisanpack/grid tree with per-breakpoint column + span classes', () => {
+        const tree = [
+            makeBlock(
+                'artisanpack/grid',
+                { numColumns: 4 },
+                [
+                    makeBlock(
+                        'artisanpack/grid-item',
+                        {
+                            innerLayout: 'center',
+                            gridColumnSpan: 2,
+                            gridRowSpan: 1,
+                        },
+                        [makeBlock('core/paragraph', { content: 'Cell content' })]
+                    ),
+                ]
+            ),
+        ];
+
+        const html = renderTree(tree);
+
+        expect(html).toContain('ap-grid');
+        expect(html).toContain('ap-grid-has-4-base-columns');
+        expect(html).toContain('ap-grid-item');
+        expect(html).toContain('ap-grid-item-layout-center');
+        expect(html).toContain('ap-grid-item-span-2-base-columns');
+        expect(html).toContain('ap-grid-item-span-1-base-row');
+        expect(html).toContain('Cell content');
+    });
+
+    it('emits per-breakpoint grid column classes from responsive.numColumns', () => {
+        const html = renderTree([
+            makeBlock('artisanpack/grid', {
+                numColumns: 1,
+                responsive: { numColumns: { md: 2, lg: 4 } },
+            }),
+        ]);
+
+        expect(html).toContain('ap-grid-has-1-base-columns');
+        expect(html).toContain('ap-grid-has-2-md-columns');
+        expect(html).toContain('ap-grid-has-4-lg-columns');
+    });
+
+    it('emits per-breakpoint span classes from responsive.gridColumnSpan / gridRowSpan', () => {
+        const html = renderTree([
+            makeBlock('artisanpack/grid-item', {
+                gridColumnSpan: 1,
+                gridRowSpan: 1,
+                responsive: {
+                    gridColumnSpan: { md: 2, lg: 3 },
+                    gridRowSpan: { md: 2 },
+                },
+            }),
+        ]);
+
+        expect(html).toContain('ap-grid-item-span-1-base-columns');
+        expect(html).toContain('ap-grid-item-span-1-base-row');
+        expect(html).toContain('ap-grid-item-span-2-md-columns');
+        expect(html).toContain('ap-grid-item-span-3-lg-columns');
+        expect(html).toContain('ap-grid-item-span-2-md-row');
+    });
+
+    it('clamps grid column counts outside 1-12 to safe defaults', () => {
+        const tooHigh = renderTree([
+            makeBlock('artisanpack/grid', { numColumns: 99 }),
+        ]);
+        const tooLow = renderTree([
+            makeBlock('artisanpack/grid', { numColumns: 0 }),
+        ]);
+
+        expect(tooHigh).toContain('ap-grid-has-12-base-columns');
+        expect(tooLow).toContain('ap-grid-has-1-base-columns');
+    });
+
+    it('clamps grid-item spans outside 1-12 to safe defaults', () => {
+        const tooHigh = renderTree([
+            makeBlock('artisanpack/grid-item', {
+                gridColumnSpan: 99,
+                gridRowSpan: 0,
+            }),
+        ]);
+
+        expect(tooHigh).toContain('ap-grid-item-span-12-base-columns');
+        expect(tooHigh).toContain('ap-grid-item-span-1-base-row');
+    });
+
+    it('skips non-numeric responsive.numColumns overrides instead of clamping them to 1', () => {
+        const html = renderTree([
+            makeBlock('artisanpack/grid', {
+                numColumns: 3,
+                responsive: { numColumns: { md: 'evil', lg: 4 } },
+            }),
+        ]);
+
+        expect(html).toContain('ap-grid-has-3-base-columns');
+        expect(html).not.toContain('ap-grid-has-1-md-columns');
+        expect(html).not.toContain('md-columns');
+        expect(html).toContain('ap-grid-has-4-lg-columns');
+    });
+
+    it('falls back to a safe default when grid-item innerLayout is invalid', () => {
+        const tree = [
+            makeBlock('artisanpack/grid-item', {
+                innerLayout: 'evil"><script>',
+            }),
+        ];
+
+        const html = renderTree(tree);
+
+        expect(html).toContain('ap-grid-item-layout-normal');
+        expect(html).not.toContain('<script>');
+        expect(html).not.toContain('ap-grid-item-layout-evil');
+    });
 });
 
 describe('Registry + dynamic fallback', () => {
diff --git a/resources/js/visual-editor/blocks/grid-item/block.json b/resources/js/visual-editor/blocks/grid-item/block.json
new file mode 100644
index 000000000..95ddf8113
--- /dev/null
+++ b/resources/js/visual-editor/blocks/grid-item/block.json
@@ -0,0 +1,84 @@
+{
+    "$schema": "https://schemas.wp.org/trunk/block.json",
+    "apiVersion": 3,
+    "name": "artisanpack/grid-item",
+    "title": "Grid Item",
+    "category": "artisanpack",
+    "description": "A single cell inside a grid, with per-breakpoint column/row spans.",
+    "keywords": ["grid", "grid-item", "cell"],
+    "parent": ["artisanpack/grid"],
+    "textdomain": "artisanpack-visual-editor",
+    "usesContext": ["numColumns"],
+    "attributes": {
+        "innerLayout": {
+            "type": "string",
+            "enum": ["normal", "equal", "center", "bottom", "last-bottom"],
+            "default": "normal"
+        },
+        "gridColumnSpan": {
+            "type": "number",
+            "default": 1
+        },
+        "gridRowSpan": {
+            "type": "number",
+            "default": 1
+        }
+    },
+    "supports": {
+        "anchor": true,
+        "align": ["wide", "full"],
+        "ariaLabel": true,
+        "className": true,
+        "html": false,
+        "spacing": {
+            "margin": ["top", "bottom"],
+            "padding": true,
+            "blockGap": true,
+            "__experimentalDefaultControls": {
+                "padding": true,
+                "blockGap": true
+            }
+        },
+        "color": {
+            "gradients": true,
+            "link": true,
+            "__experimentalDefaultControls": {
+                "background": true,
+                "text": true
+            }
+        },
+        "shadow": true,
+        "__experimentalBorder": {
+            "color": true,
+            "radius": true,
+            "style": true,
+            "width": true,
+            "__experimentalDefaultControls": {
+                "color": true,
+                "radius": true,
+                "style": true,
+                "width": true
+            }
+        },
+        "typography": {
+            "fontSize": true,
+            "lineHeight": true,
+            "__experimentalFontFamily": true,
+            "__experimentalFontWeight": true,
+            "__experimentalFontStyle": true,
+            "__experimentalTextTransform": true,
+            "__experimentalTextDecoration": true,
+            "__experimentalLetterSpacing": true,
+            "__experimentalDefaultControls": {
+                "fontSize": true
+            }
+        },
+        "artisanpackResponsive": {
+            "attributes": [
+                "spacing",
+                "gridColumnSpan",
+                "gridRowSpan"
+            ]
+        }
+    }
+}
diff --git a/resources/js/visual-editor/blocks/grid-item/edit.tsx b/resources/js/visual-editor/blocks/grid-item/edit.tsx
new file mode 100644
index 000000000..47ec9d3c3
--- /dev/null
+++ b/resources/js/visual-editor/blocks/grid-item/edit.tsx
@@ -0,0 +1,135 @@
+/**
+ * Grid Item — editor-side component (#498).
+ *
+ * Child of `artisanpack/grid`. Carries `gridColumnSpan` and `gridRowSpan`
+ * attributes plus an `innerLayout` enum that maps onto a flexbox
+ * arrangement of its grandchildren.
+ *
+ * The span attributes are enrolled in `artisanpackResponsive.attributes`
+ * so the HOC surfaces a per-breakpoint range control automatically and
+ * merges the active breakpoint's override into the base attribute for
+ * the editor canvas preview. The column-span max is clamped to the
+ * parent grid's resolved `numColumns` via block context.
+ */
+
+import type { ReactElement } from 'react';
+import { InspectorControls, useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { PanelBody, RangeControl, SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+import { TEXT_DOMAIN } from '../../vendor/i18n';
+
+type InnerLayout = 'normal' | 'equal' | 'center' | 'bottom' | 'last-bottom';
+
+const VALID_INNER_LAYOUTS: ReadonlyArray<InnerLayout> = [
+    'normal',
+    'equal',
+    'center',
+    'bottom',
+    'last-bottom',
+];
+
+interface GridItemAttributes {
+    readonly innerLayout: InnerLayout;
+    readonly gridColumnSpan: number;
+    readonly gridRowSpan: number;
+}
+
+interface GridItemContext {
+    readonly numColumns?: number;
+}
+
+interface GridItemEditProps {
+    readonly attributes: GridItemAttributes;
+    readonly setAttributes: (next: Partial<GridItemAttributes>) => void;
+    readonly context: GridItemContext;
+}
+
+function clampSpan(value: number | undefined, max: number, fallback: number): number {
+    const next = typeof value === 'number' && Number.isFinite(value) ? Math.trunc(value) : fallback;
+    if (next < 1) {
+        return 1;
+    }
+    if (next > max) {
+        return max;
+    }
+    return next;
+}
+
+export default function GridItemEdit({
+    attributes,
+    setAttributes,
+    context,
+}: GridItemEditProps): ReactElement {
+    const numColumns = clampSpan(context.numColumns, 12, 12);
+    const gridColumnSpan = clampSpan(attributes.gridColumnSpan, numColumns, 1);
+    const gridRowSpan = clampSpan(attributes.gridRowSpan, 12, 1);
+    const innerLayout = (VALID_INNER_LAYOUTS as ReadonlyArray<string>).includes(
+        attributes.innerLayout
+    )
+        ? attributes.innerLayout
+        : 'normal';
+
+    const className = [
+        'ap-grid-item',
+        `ap-grid-item-layout-${innerLayout}`,
+        `ap-grid-item-span-${gridColumnSpan}-base-columns`,
+        `ap-grid-item-span-${gridRowSpan}-base-row`,
+    ].join(' ');
+
+    const blockProps = useBlockProps({ className });
+    const innerBlocksProps = useInnerBlocksProps(blockProps, {});
+
+    return (
+        <>
+            <InspectorControls>
+                <PanelBody title={__('Grid Item Settings', TEXT_DOMAIN)} initialOpen>
+                    <SelectControl
+                        label={__('Inner Layout', TEXT_DOMAIN)}
+                        value={innerLayout}
+                        options={[
+                            { value: 'normal', label: __('Normal Spacing', TEXT_DOMAIN) },
+                            { value: 'equal', label: __('Equal Spacing', TEXT_DOMAIN) },
+                            { value: 'center', label: __('Center Align', TEXT_DOMAIN) },
+                            { value: 'bottom', label: __('All Bottom', TEXT_DOMAIN) },
+                            { value: 'last-bottom', label: __('Last Item at Bottom', TEXT_DOMAIN) },
+                        ]}
+                        onChange={(value) => {
+                            if ((VALID_INNER_LAYOUTS as ReadonlyArray<string>).includes(value)) {
+                                setAttributes({ innerLayout: value as InnerLayout });
+                            }
+                        }}
+                        __nextHasNoMarginBottom
+                    />
+                    <RangeControl
+                        label={__('Column Span', TEXT_DOMAIN)}
+                        help={__('How many grid columns this item spans.', TEXT_DOMAIN)}
+                        value={gridColumnSpan}
+                        onChange={(value) =>
+                            setAttributes({ gridColumnSpan: clampSpan(value, numColumns, 1) })
+                        }
+                        min={1}
+                        max={numColumns}
+                        allowReset
+                        resetFallbackValue={1}
+                        __nextHasNoMarginBottom
+                    />
+                    <RangeControl
+                        label={__('Row Span', TEXT_DOMAIN)}
+                        help={__('How many grid rows this item spans.', TEXT_DOMAIN)}
+                        value={gridRowSpan}
+                        onChange={(value) =>
+                            setAttributes({ gridRowSpan: clampSpan(value, 12, 1) })
+                        }
+                        min={1}
+                        max={12}
+                        allowReset
+                        resetFallbackValue={1}
+                        __nextHasNoMarginBottom
+                    />
+                </PanelBody>
+            </InspectorControls>
+            <div {...innerBlocksProps} />
+        </>
+    );
+}
diff --git a/resources/js/visual-editor/blocks/grid-item/index.ts b/resources/js/visual-editor/blocks/grid-item/index.ts
new file mode 100644
index 000000000..1a4ca5fdd
--- /dev/null
+++ b/resources/js/visual-editor/blocks/grid-item/index.ts
@@ -0,0 +1,22 @@
+/**
+ * Grid Item block entrypoint.
+ *
+ * Auto-discovered by `editor/custom-blocks.ts`. Child of
+ * `artisanpack/grid`; renders a single cell with per-breakpoint span
+ * controls (#498).
+ */
+
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+import '../grid/grid.css';
+
+export { edit, save, metadata };
+
+export default {
+    name: metadata.name,
+    metadata,
+    edit,
+    save,
+};
diff --git a/resources/js/visual-editor/blocks/grid-item/save.tsx b/resources/js/visual-editor/blocks/grid-item/save.tsx
new file mode 100644
index 000000000..4912dc484
--- /dev/null
+++ b/resources/js/visual-editor/blocks/grid-item/save.tsx
@@ -0,0 +1,9 @@
+/**
+ * Grid Item — save component.
+ *
+ * Dynamic block: renderers walk the persisted inner-block tree.
+ */
+
+export default function GridItemSave(): null {
+    return null;
+}
diff --git a/resources/js/visual-editor/blocks/grid/block.json b/resources/js/visual-editor/blocks/grid/block.json
new file mode 100644
index 000000000..ae79a1252
--- /dev/null
+++ b/resources/js/visual-editor/blocks/grid/block.json
@@ -0,0 +1,66 @@
+{
+    "$schema": "https://schemas.wp.org/trunk/block.json",
+    "apiVersion": 3,
+    "name": "artisanpack/grid",
+    "title": "Grid",
+    "category": "artisanpack",
+    "description": "Add a responsive grid with a custom number of columns per breakpoint.",
+    "keywords": ["grid", "columns", "layout"],
+    "textdomain": "artisanpack-visual-editor",
+    "attributes": {
+        "numColumns": {
+            "type": "number",
+            "default": 4
+        }
+    },
+    "providesContext": {
+        "numColumns": "numColumns"
+    },
+    "supports": {
+        "anchor": true,
+        "align": ["wide", "full"],
+        "ariaLabel": true,
+        "className": true,
+        "html": false,
+        "spacing": {
+            "blockGap": {
+                "__experimentalDefault": "1.5rem",
+                "sides": ["horizontal", "vertical"]
+            },
+            "margin": ["top", "bottom"],
+            "padding": true,
+            "__experimentalDefaultControls": {
+                "padding": true,
+                "blockGap": true
+            }
+        },
+        "color": {
+            "gradients": true,
+            "link": true,
+            "__experimentalDefaultControls": {
+                "background": true,
+                "text": true
+            }
+        },
+        "shadow": true,
+        "__experimentalBorder": {
+            "color": true,
+            "radius": true,
+            "style": true,
+            "width": true,
+            "__experimentalDefaultControls": {
+                "color": true,
+                "radius": true,
+                "style": true,
+                "width": true
+            }
+        },
+        "artisanpackResponsive": {
+            "attributes": [
+                "spacing",
+                "align",
+                "numColumns"
+            ]
+        }
+    }
+}
diff --git a/resources/js/visual-editor/blocks/grid/edit.tsx b/resources/js/visual-editor/blocks/grid/edit.tsx
new file mode 100644
index 000000000..94e59ea3a
--- /dev/null
+++ b/resources/js/visual-editor/blocks/grid/edit.tsx
@@ -0,0 +1,84 @@
+/**
+ * Grid — editor-side component (#498).
+ *
+ * Parent block of the grid family. Hosts one or more
+ * `artisanpack/grid-item` children via `useInnerBlocksProps` and
+ * provides the resolved column count down to each item via block
+ * context so item inspectors can clamp their span ranges to the
+ * grid's actual column count.
+ *
+ * Per-breakpoint column count is encoded as a static class
+ * (`ap-grid-has-N-{bp}-columns`) that the matching media-query rule in
+ * `grid.css` picks up. The `artisanpackResponsive` HOC merges the
+ * active breakpoint's override into `numColumns` so the editor canvas
+ * shows the live preview as the author switches breakpoints.
+ */
+
+import type { ReactElement } from 'react';
+import { InspectorControls, useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { PanelBody, RangeControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+import { TEXT_DOMAIN } from '../../vendor/i18n';
+
+interface GridAttributes {
+    readonly numColumns: number;
+}
+
+interface GridEditProps {
+    readonly attributes: GridAttributes;
+    readonly setAttributes: (next: Partial<GridAttributes>) => void;
+}
+
+const ALLOWED_BLOCKS: string[] = ['artisanpack/grid-item'];
+
+const TEMPLATE: [string, Record<string, unknown>][] = [
+    ['artisanpack/grid-item', {}],
+    ['artisanpack/grid-item', {}],
+    ['artisanpack/grid-item', {}],
+    ['artisanpack/grid-item', {}],
+];
+
+function clampColumns(value: number | undefined, fallback: number): number {
+    const next = typeof value === 'number' && Number.isFinite(value) ? Math.trunc(value) : fallback;
+    if (next < 1) {
+        return 1;
+    }
+    if (next > 12) {
+        return 12;
+    }
+    return next;
+}
+
+export default function GridEdit({ attributes, setAttributes }: GridEditProps): ReactElement {
+    const numColumns = clampColumns(attributes.numColumns, 4);
+
+    const className = `ap-grid ap-grid-has-${numColumns}-base-columns`;
+    const blockProps = useBlockProps({ className });
+    const innerBlocksProps = useInnerBlocksProps(blockProps, {
+        allowedBlocks: ALLOWED_BLOCKS,
+        template: TEMPLATE,
+    });
+
+    return (
+        <>
+            <InspectorControls>
+                <PanelBody title={__('Grid Settings', TEXT_DOMAIN)} initialOpen>
+                    <RangeControl
+                        label={__('Columns', TEXT_DOMAIN)}
+                        value={numColumns}
+                        onChange={(value) =>
+                            setAttributes({ numColumns: clampColumns(value, 4) })
+                        }
+                        min={1}
+                        max={12}
+                        allowReset
+                        resetFallbackValue={4}
+                        __nextHasNoMarginBottom
+                    />
+                </PanelBody>
+            </InspectorControls>
+            <div {...innerBlocksProps} />
+        </>
+    );
+}
diff --git a/resources/js/visual-editor/blocks/grid/grid.css b/resources/js/visual-editor/blocks/grid/grid.css
new file mode 100644
index 000000000..78f27aacc
--- /dev/null
+++ b/resources/js/visual-editor/blocks/grid/grid.css
@@ -0,0 +1,312 @@
+/**
+ * Grid family styles (#498).
+ *
+ * Loaded in the editor via `blocks/{grid,grid-item}/index.ts`. On the
+ * public frontend the Blade renderer serves an identical copy from
+ * `packages/visual-editor-renderer-blade/resources/assets/frontend/grid.css`,
+ * wired up by `<x-ve-blocks-styles />`. React and Vue renderers emit
+ * the same class names so a single stylesheet covers all three.
+ *
+ * Per-breakpoint column count and item span are encoded as static
+ * classes — `ap-grid-has-N-{bp}-columns`, `ap-grid-item-span-N-{bp}-columns`,
+ * `ap-grid-item-span-N-{bp}-row` — and emitted by the renderers on each
+ * instance. Mobile-first cascade: base rules first, then each registered
+ * Tailwind breakpoint (sm 640, md 768, lg 1024, xl 1280, 2xl 1536) in
+ * ascending min-width order, so a later breakpoint's class overrides the
+ * earlier one for the wider viewport.
+ */
+
+.ap-grid {
+    display: grid;
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    height: 100%;
+}
+
+.ap-grid-item {
+    display: flex;
+    flex-grow: 1;
+    min-width: 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+}
+
+.ap-grid-item > * {
+    width: 100%;
+}
+
+.ap-grid-item.ap-grid-item-layout-normal {
+    align-items: stretch;
+    justify-content: flex-start;
+}
+
+.ap-grid-item.ap-grid-item-layout-equal {
+    align-items: stretch;
+    justify-content: space-between;
+    flex-direction: column;
+}
+
+.ap-grid-item.ap-grid-item-layout-center {
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.ap-grid-item.ap-grid-item-layout-bottom {
+    flex-direction: column;
+    justify-content: flex-end;
+}
+
+.ap-grid-item.ap-grid-item-layout-last-bottom {
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+/* === base (no media query) === */
+.ap-grid.ap-grid-has-1-base-columns { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-2-base-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-3-base-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-4-base-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-5-base-columns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-6-base-columns { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-7-base-columns { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-8-base-columns { grid-template-columns: repeat(8, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-9-base-columns { grid-template-columns: repeat(9, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-10-base-columns { grid-template-columns: repeat(10, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-11-base-columns { grid-template-columns: repeat(11, minmax(0, 1fr)); }
+.ap-grid.ap-grid-has-12-base-columns { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+.ap-grid-item.ap-grid-item-span-1-base-columns { grid-column: span 1; }
+.ap-grid-item.ap-grid-item-span-2-base-columns { grid-column: span 2; }
+.ap-grid-item.ap-grid-item-span-3-base-columns { grid-column: span 3; }
+.ap-grid-item.ap-grid-item-span-4-base-columns { grid-column: span 4; }
+.ap-grid-item.ap-grid-item-span-5-base-columns { grid-column: span 5; }
+.ap-grid-item.ap-grid-item-span-6-base-columns { grid-column: span 6; }
+.ap-grid-item.ap-grid-item-span-7-base-columns { grid-column: span 7; }
+.ap-grid-item.ap-grid-item-span-8-base-columns { grid-column: span 8; }
+.ap-grid-item.ap-grid-item-span-9-base-columns { grid-column: span 9; }
+.ap-grid-item.ap-grid-item-span-10-base-columns { grid-column: span 10; }
+.ap-grid-item.ap-grid-item-span-11-base-columns { grid-column: span 11; }
+.ap-grid-item.ap-grid-item-span-12-base-columns { grid-column: span 12; }
+
+.ap-grid-item.ap-grid-item-span-1-base-row { grid-row: span 1; }
+.ap-grid-item.ap-grid-item-span-2-base-row { grid-row: span 2; }
+.ap-grid-item.ap-grid-item-span-3-base-row { grid-row: span 3; }
+.ap-grid-item.ap-grid-item-span-4-base-row { grid-row: span 4; }
+.ap-grid-item.ap-grid-item-span-5-base-row { grid-row: span 5; }
+.ap-grid-item.ap-grid-item-span-6-base-row { grid-row: span 6; }
+.ap-grid-item.ap-grid-item-span-7-base-row { grid-row: span 7; }
+.ap-grid-item.ap-grid-item-span-8-base-row { grid-row: span 8; }
+.ap-grid-item.ap-grid-item-span-9-base-row { grid-row: span 9; }
+.ap-grid-item.ap-grid-item-span-10-base-row { grid-row: span 10; }
+.ap-grid-item.ap-grid-item-span-11-base-row { grid-row: span 11; }
+.ap-grid-item.ap-grid-item-span-12-base-row { grid-row: span 12; }
+
+/* === sm: 640px === */
+@media (min-width: 640px) {
+    .ap-grid.ap-grid-has-1-sm-columns { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-2-sm-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-3-sm-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-4-sm-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-5-sm-columns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-6-sm-columns { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-7-sm-columns { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-8-sm-columns { grid-template-columns: repeat(8, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-9-sm-columns { grid-template-columns: repeat(9, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-10-sm-columns { grid-template-columns: repeat(10, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-11-sm-columns { grid-template-columns: repeat(11, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-12-sm-columns { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+    .ap-grid-item.ap-grid-item-span-1-sm-columns { grid-column: span 1; }
+    .ap-grid-item.ap-grid-item-span-2-sm-columns { grid-column: span 2; }
+    .ap-grid-item.ap-grid-item-span-3-sm-columns { grid-column: span 3; }
+    .ap-grid-item.ap-grid-item-span-4-sm-columns { grid-column: span 4; }
+    .ap-grid-item.ap-grid-item-span-5-sm-columns { grid-column: span 5; }
+    .ap-grid-item.ap-grid-item-span-6-sm-columns { grid-column: span 6; }
+    .ap-grid-item.ap-grid-item-span-7-sm-columns { grid-column: span 7; }
+    .ap-grid-item.ap-grid-item-span-8-sm-columns { grid-column: span 8; }
+    .ap-grid-item.ap-grid-item-span-9-sm-columns { grid-column: span 9; }
+    .ap-grid-item.ap-grid-item-span-10-sm-columns { grid-column: span 10; }
+    .ap-grid-item.ap-grid-item-span-11-sm-columns { grid-column: span 11; }
+    .ap-grid-item.ap-grid-item-span-12-sm-columns { grid-column: span 12; }
+
+    .ap-grid-item.ap-grid-item-span-1-sm-row { grid-row: span 1; }
+    .ap-grid-item.ap-grid-item-span-2-sm-row { grid-row: span 2; }
+    .ap-grid-item.ap-grid-item-span-3-sm-row { grid-row: span 3; }
+    .ap-grid-item.ap-grid-item-span-4-sm-row { grid-row: span 4; }
+    .ap-grid-item.ap-grid-item-span-5-sm-row { grid-row: span 5; }
+    .ap-grid-item.ap-grid-item-span-6-sm-row { grid-row: span 6; }
+    .ap-grid-item.ap-grid-item-span-7-sm-row { grid-row: span 7; }
+    .ap-grid-item.ap-grid-item-span-8-sm-row { grid-row: span 8; }
+    .ap-grid-item.ap-grid-item-span-9-sm-row { grid-row: span 9; }
+    .ap-grid-item.ap-grid-item-span-10-sm-row { grid-row: span 10; }
+    .ap-grid-item.ap-grid-item-span-11-sm-row { grid-row: span 11; }
+    .ap-grid-item.ap-grid-item-span-12-sm-row { grid-row: span 12; }
+}
+
+/* === md: 768px === */
+@media (min-width: 768px) {
+    .ap-grid.ap-grid-has-1-md-columns { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-2-md-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-3-md-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-4-md-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-5-md-columns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-6-md-columns { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-7-md-columns { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-8-md-columns { grid-template-columns: repeat(8, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-9-md-columns { grid-template-columns: repeat(9, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-10-md-columns { grid-template-columns: repeat(10, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-11-md-columns { grid-template-columns: repeat(11, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-12-md-columns { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+    .ap-grid-item.ap-grid-item-span-1-md-columns { grid-column: span 1; }
+    .ap-grid-item.ap-grid-item-span-2-md-columns { grid-column: span 2; }
+    .ap-grid-item.ap-grid-item-span-3-md-columns { grid-column: span 3; }
+    .ap-grid-item.ap-grid-item-span-4-md-columns { grid-column: span 4; }
+    .ap-grid-item.ap-grid-item-span-5-md-columns { grid-column: span 5; }
+    .ap-grid-item.ap-grid-item-span-6-md-columns { grid-column: span 6; }
+    .ap-grid-item.ap-grid-item-span-7-md-columns { grid-column: span 7; }
+    .ap-grid-item.ap-grid-item-span-8-md-columns { grid-column: span 8; }
+    .ap-grid-item.ap-grid-item-span-9-md-columns { grid-column: span 9; }
+    .ap-grid-item.ap-grid-item-span-10-md-columns { grid-column: span 10; }
+    .ap-grid-item.ap-grid-item-span-11-md-columns { grid-column: span 11; }
+    .ap-grid-item.ap-grid-item-span-12-md-columns { grid-column: span 12; }
+
+    .ap-grid-item.ap-grid-item-span-1-md-row { grid-row: span 1; }
+    .ap-grid-item.ap-grid-item-span-2-md-row { grid-row: span 2; }
+    .ap-grid-item.ap-grid-item-span-3-md-row { grid-row: span 3; }
+    .ap-grid-item.ap-grid-item-span-4-md-row { grid-row: span 4; }
+    .ap-grid-item.ap-grid-item-span-5-md-row { grid-row: span 5; }
+    .ap-grid-item.ap-grid-item-span-6-md-row { grid-row: span 6; }
+    .ap-grid-item.ap-grid-item-span-7-md-row { grid-row: span 7; }
+    .ap-grid-item.ap-grid-item-span-8-md-row { grid-row: span 8; }
+    .ap-grid-item.ap-grid-item-span-9-md-row { grid-row: span 9; }
+    .ap-grid-item.ap-grid-item-span-10-md-row { grid-row: span 10; }
+    .ap-grid-item.ap-grid-item-span-11-md-row { grid-row: span 11; }
+    .ap-grid-item.ap-grid-item-span-12-md-row { grid-row: span 12; }
+}
+
+/* === lg: 1024px === */
+@media (min-width: 1024px) {
+    .ap-grid.ap-grid-has-1-lg-columns { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-2-lg-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-3-lg-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-4-lg-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-5-lg-columns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-6-lg-columns { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-7-lg-columns { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-8-lg-columns { grid-template-columns: repeat(8, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-9-lg-columns { grid-template-columns: repeat(9, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-10-lg-columns { grid-template-columns: repeat(10, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-11-lg-columns { grid-template-columns: repeat(11, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-12-lg-columns { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+    .ap-grid-item.ap-grid-item-span-1-lg-columns { grid-column: span 1; }
+    .ap-grid-item.ap-grid-item-span-2-lg-columns { grid-column: span 2; }
+    .ap-grid-item.ap-grid-item-span-3-lg-columns { grid-column: span 3; }
+    .ap-grid-item.ap-grid-item-span-4-lg-columns { grid-column: span 4; }
+    .ap-grid-item.ap-grid-item-span-5-lg-columns { grid-column: span 5; }
+    .ap-grid-item.ap-grid-item-span-6-lg-columns { grid-column: span 6; }
+    .ap-grid-item.ap-grid-item-span-7-lg-columns { grid-column: span 7; }
+    .ap-grid-item.ap-grid-item-span-8-lg-columns { grid-column: span 8; }
+    .ap-grid-item.ap-grid-item-span-9-lg-columns { grid-column: span 9; }
+    .ap-grid-item.ap-grid-item-span-10-lg-columns { grid-column: span 10; }
+    .ap-grid-item.ap-grid-item-span-11-lg-columns { grid-column: span 11; }
+    .ap-grid-item.ap-grid-item-span-12-lg-columns { grid-column: span 12; }
+
+    .ap-grid-item.ap-grid-item-span-1-lg-row { grid-row: span 1; }
+    .ap-grid-item.ap-grid-item-span-2-lg-row { grid-row: span 2; }
+    .ap-grid-item.ap-grid-item-span-3-lg-row { grid-row: span 3; }
+    .ap-grid-item.ap-grid-item-span-4-lg-row { grid-row: span 4; }
+    .ap-grid-item.ap-grid-item-span-5-lg-row { grid-row: span 5; }
+    .ap-grid-item.ap-grid-item-span-6-lg-row { grid-row: span 6; }
+    .ap-grid-item.ap-grid-item-span-7-lg-row { grid-row: span 7; }
+    .ap-grid-item.ap-grid-item-span-8-lg-row { grid-row: span 8; }
+    .ap-grid-item.ap-grid-item-span-9-lg-row { grid-row: span 9; }
+    .ap-grid-item.ap-grid-item-span-10-lg-row { grid-row: span 10; }
+    .ap-grid-item.ap-grid-item-span-11-lg-row { grid-row: span 11; }
+    .ap-grid-item.ap-grid-item-span-12-lg-row { grid-row: span 12; }
+}
+
+/* === xl: 1280px === */
+@media (min-width: 1280px) {
+    .ap-grid.ap-grid-has-1-xl-columns { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-2-xl-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-3-xl-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-4-xl-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-5-xl-columns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-6-xl-columns { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-7-xl-columns { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-8-xl-columns { grid-template-columns: repeat(8, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-9-xl-columns { grid-template-columns: repeat(9, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-10-xl-columns { grid-template-columns: repeat(10, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-11-xl-columns { grid-template-columns: repeat(11, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-12-xl-columns { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+    .ap-grid-item.ap-grid-item-span-1-xl-columns { grid-column: span 1; }
+    .ap-grid-item.ap-grid-item-span-2-xl-columns { grid-column: span 2; }
+    .ap-grid-item.ap-grid-item-span-3-xl-columns { grid-column: span 3; }
+    .ap-grid-item.ap-grid-item-span-4-xl-columns { grid-column: span 4; }
+    .ap-grid-item.ap-grid-item-span-5-xl-columns { grid-column: span 5; }
+    .ap-grid-item.ap-grid-item-span-6-xl-columns { grid-column: span 6; }
+    .ap-grid-item.ap-grid-item-span-7-xl-columns { grid-column: span 7; }
+    .ap-grid-item.ap-grid-item-span-8-xl-columns { grid-column: span 8; }
+    .ap-grid-item.ap-grid-item-span-9-xl-columns { grid-column: span 9; }
+    .ap-grid-item.ap-grid-item-span-10-xl-columns { grid-column: span 10; }
+    .ap-grid-item.ap-grid-item-span-11-xl-columns { grid-column: span 11; }
+    .ap-grid-item.ap-grid-item-span-12-xl-columns { grid-column: span 12; }
+
+    .ap-grid-item.ap-grid-item-span-1-xl-row { grid-row: span 1; }
+    .ap-grid-item.ap-grid-item-span-2-xl-row { grid-row: span 2; }
+    .ap-grid-item.ap-grid-item-span-3-xl-row { grid-row: span 3; }
+    .ap-grid-item.ap-grid-item-span-4-xl-row { grid-row: span 4; }
+    .ap-grid-item.ap-grid-item-span-5-xl-row { grid-row: span 5; }
+    .ap-grid-item.ap-grid-item-span-6-xl-row { grid-row: span 6; }
+    .ap-grid-item.ap-grid-item-span-7-xl-row { grid-row: span 7; }
+    .ap-grid-item.ap-grid-item-span-8-xl-row { grid-row: span 8; }
+    .ap-grid-item.ap-grid-item-span-9-xl-row { grid-row: span 9; }
+    .ap-grid-item.ap-grid-item-span-10-xl-row { grid-row: span 10; }
+    .ap-grid-item.ap-grid-item-span-11-xl-row { grid-row: span 11; }
+    .ap-grid-item.ap-grid-item-span-12-xl-row { grid-row: span 12; }
+}
+
+/* === 2xl: 1536px === */
+@media (min-width: 1536px) {
+    .ap-grid.ap-grid-has-1-2xl-columns { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-2-2xl-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-3-2xl-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-4-2xl-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-5-2xl-columns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-6-2xl-columns { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-7-2xl-columns { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-8-2xl-columns { grid-template-columns: repeat(8, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-9-2xl-columns { grid-template-columns: repeat(9, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-10-2xl-columns { grid-template-columns: repeat(10, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-11-2xl-columns { grid-template-columns: repeat(11, minmax(0, 1fr)); }
+    .ap-grid.ap-grid-has-12-2xl-columns { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+    .ap-grid-item.ap-grid-item-span-1-2xl-columns { grid-column: span 1; }
+    .ap-grid-item.ap-grid-item-span-2-2xl-columns { grid-column: span 2; }
+    .ap-grid-item.ap-grid-item-span-3-2xl-columns { grid-column: span 3; }
+    .ap-grid-item.ap-grid-item-span-4-2xl-columns { grid-column: span 4; }
+    .ap-grid-item.ap-grid-item-span-5-2xl-columns { grid-column: span 5; }
+    .ap-grid-item.ap-grid-item-span-6-2xl-columns { grid-column: span 6; }
+    .ap-grid-item.ap-grid-item-span-7-2xl-columns { grid-column: span 7; }
+    .ap-grid-item.ap-grid-item-span-8-2xl-columns { grid-column: span 8; }
+    .ap-grid-item.ap-grid-item-span-9-2xl-columns { grid-column: span 9; }
+    .ap-grid-item.ap-grid-item-span-10-2xl-columns { grid-column: span 10; }
+    .ap-grid-item.ap-grid-item-span-11-2xl-columns { grid-column: span 11; }
+    .ap-grid-item.ap-grid-item-span-12-2xl-columns { grid-column: span 12; }
+
+    .ap-grid-item.ap-grid-item-span-1-2xl-row { grid-row: span 1; }
+    .ap-grid-item.ap-grid-item-span-2-2xl-row { grid-row: span 2; }
+    .ap-grid-item.ap-grid-item-span-3-2xl-row { grid-row: span 3; }
+    .ap-grid-item.ap-grid-item-span-4-2xl-row { grid-row: span 4; }
+    .ap-grid-item.ap-grid-item-span-5-2xl-row { grid-row: span 5; }
+    .ap-grid-item.ap-grid-item-span-6-2xl-row { grid-row: span 6; }
+    .ap-grid-item.ap-grid-item-span-7-2xl-row { grid-row: span 7; }
+    .ap-grid-item.ap-grid-item-span-8-2xl-row { grid-row: span 8; }
+    .ap-grid-item.ap-grid-item-span-9-2xl-row { grid-row: span 9; }
+    .ap-grid-item.ap-grid-item-span-10-2xl-row { grid-row: span 10; }
+    .ap-grid-item.ap-grid-item-span-11-2xl-row { grid-row: span 11; }
+    .ap-grid-item.ap-grid-item-span-12-2xl-row { grid-row: span 12; }
+}
diff --git a/resources/js/visual-editor/blocks/grid/index.ts b/resources/js/visual-editor/blocks/grid/index.ts
new file mode 100644
index 000000000..29b42eabb
--- /dev/null
+++ b/resources/js/visual-editor/blocks/grid/index.ts
@@ -0,0 +1,22 @@
+/**
+ * Grid block entrypoint.
+ *
+ * Auto-discovered by `editor/custom-blocks.ts` and registered against
+ * `@wordpress/blocks.registerBlockType`. Parent block of the grid
+ * family (#498).
+ */
+
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+import './grid.css';
+
+export { edit, save, metadata };
+
+export default {
+    name: metadata.name,
+    metadata,
+    edit,
+    save,
+};
diff --git a/resources/js/visual-editor/blocks/grid/save.tsx b/resources/js/visual-editor/blocks/grid/save.tsx
new file mode 100644
index 000000000..495f8185f
--- /dev/null
+++ b/resources/js/visual-editor/blocks/grid/save.tsx
@@ -0,0 +1,11 @@
+/**
+ * Grid — save component.
+ *
+ * Dynamic block: each renderer reads the persisted inner-block tree and
+ * emits the final markup so returning `null` keeps Gutenberg from
+ * serializing wrapper markup into post_content.
+ */
+
+export default function GridSave(): null {
+    return null;
+}
diff --git a/resources/js/visual-editor/editor/__tests__/canvas-styles.test.ts b/resources/js/visual-editor/editor/__tests__/canvas-styles.test.ts
index da56d2639..c9ad501d7 100644
--- a/resources/js/visual-editor/editor/__tests__/canvas-styles.test.ts
+++ b/resources/js/visual-editor/editor/__tests__/canvas-styles.test.ts
@@ -33,12 +33,12 @@ describe('canvasStyles', () => {
         // token bridge + components + block-editor (style + content)
         // + block-library (style + editor) + LAYOUT_BASELINE
         // + accordion + tabs + editor-tweaks (interactive blocks; #497)
-        // + DEFAULT_CANVAS_STYLES + ALIGNMENT_OVERRIDE_STYLES
+        // + grid (#498) + DEFAULT_CANVAS_STYLES + ALIGNMENT_OVERRIDE_STYLES
         // + POST_EDITOR_FRAMING_STYLES (Keystone #47 — site-editor
         // canvases skip the framing entry but keep the alignment
         // overrides so the wide/full toolbar buttons take effect
         // there too).
-        expect(canvasStyles).toHaveLength(13);
+        expect(canvasStyles).toHaveLength(14);
     });
 
     it('places DEFAULT_CANVAS_STYLES before POST_EDITOR_FRAMING_STYLES so the framing wins the cascade', () => {
diff --git a/resources/js/visual-editor/editor/canvas-styles.ts b/resources/js/visual-editor/editor/canvas-styles.ts
index 96ed283f5..63140d0b1 100644
--- a/resources/js/visual-editor/editor/canvas-styles.ts
+++ b/resources/js/visual-editor/editor/canvas-styles.ts
@@ -35,6 +35,7 @@ import {
 } from '../editor-settings';
 
 import accordionStyles from '../blocks/accordion/accordion.css?inline';
+import gridStyles from '../blocks/grid/grid.css?inline';
 import tabsStyles from '../blocks/tabs/tabs.css?inline';
 
 import canvasThemeTokens from './canvas-theme-tokens.css?inline';
@@ -109,6 +110,10 @@ export const canvasStyles: readonly CanvasStyle[] = [
     // editability) are appended after the front-end rules.
     { css: accordionStyles },
     { css: tabsStyles },
+    // Grid family (#498) — same iframe-doesn't-see-`?inline` story as
+    // accordion/tabs above. Ship the rules here so authors get an
+    // accurate preview of the responsive column layout.
+    { css: gridStyles },
     {
         css: `
             /* Editor preview overrides — keep every panel and tab