diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5eb474d43..920ea8c1e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,20 @@
 # Changelog
 
+## Unreleased
+
+### Features
+
+- CSS Grid layout mode — select a frame, click the grid icon in the auto layout toolbar to switch from flex to grid. Configure column/row tracks (fr, fixed px, auto), column and row gaps, and per-side padding. Powered by a [Yoga fork](https://github.com/open-pencil/yoga/tree/grid) with cherry-picked CSS Grid PRs from upstream
+- JSX and Tailwind CSS export for grid layouts — `grid grid-cols-N`, `gap-x-*`/`gap-y-*`, child `col-start-*`/`row-start-*`/`col-span-*`/`row-span-*`
+
+### Improvements
+
+- Compact layout controls — icon-based gap (↔/↕) and padding (T/R/B/L) inputs instead of text labels
+- Auto-detect horizontal vs vertical direction when wrapping in auto layout (Shift+A)
+- Fix alignment grid for vertical layouts — visual positions now match spatial axes
+- Fix grid switch from HUG-sized frames — frame expands to fit children
+- Remove unwanted white fill when wrapping in auto layout
+
 ## 0.8.0 — 2026-03-07
 
 ### Features
diff --git a/bun.lock b/bun.lock
index 0b70dacd1..d22b576d5 100644
--- a/bun.lock
+++ b/bun.lock
@@ -40,7 +40,7 @@
         "y-indexeddb": "^9.0.12",
         "y-protocols": "^1.0.7",
         "yjs": "^13.6.29",
-        "yoga-layout": "^3.2.1",
+        "yoga-layout": "npm:@open-pencil/yoga-layout@3.3.0-grid.2",
       },
       "devDependencies": {
         "@agentclientprotocol/sdk": "^0.14.1",
@@ -72,7 +72,7 @@
     },
     "packages/acp": {
       "name": "@open-pencil/acp",
-      "version": "0.7.0",
+      "version": "0.8.0",
       "bin": {
         "openpencil-acp": "./dist/index.js",
       },
@@ -87,7 +87,7 @@
     },
     "packages/cli": {
       "name": "@open-pencil/cli",
-      "version": "0.7.0",
+      "version": "0.8.0",
       "bin": {
         "openpencil": "./src/index.ts",
       },
@@ -103,14 +103,14 @@
     },
     "packages/core": {
       "name": "@open-pencil/core",
-      "version": "0.7.0",
+      "version": "0.8.0",
       "dependencies": {
         "canvaskit-wasm": "^0.40.0",
         "culori": "^4.0.2",
         "diff": "^8.0.3",
         "fflate": "^0.8.2",
         "fzstd": "^0.1.1",
-        "yoga-layout": "^3.2.1",
+        "yoga-layout": "npm:@open-pencil/yoga-layout@3.3.0-grid.2",
       },
       "devDependencies": {
         "@types/culori": "^4.0.1",
@@ -127,7 +127,7 @@
     },
     "packages/mcp": {
       "name": "@open-pencil/mcp",
-      "version": "0.7.0",
+      "version": "0.8.0",
       "bin": {
         "openpencil-mcp": "./dist/index.js",
         "openpencil-mcp-http": "./dist/http.js",
@@ -2402,7 +2402,7 @@
 
     "yjs": ["yjs@13.6.29", "", { "dependencies": { "lib0": "^0.2.99" } }, "sha512-kHqDPdltoXH+X4w1lVmMtddE3Oeqq48nM40FD5ojTd8xYhQpzIDcfE2keMSU5bAgRPJBe225WTUdyUgj1DtbiQ=="],
 
-    "yoga-layout": ["yoga-layout@3.2.1", "", {}, "sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ=="],
+    "yoga-layout": ["@open-pencil/yoga-layout@3.3.0-grid.2", "", {}, "sha512-BFaOZ2iXD/v3Y805j5PN/biIKCFEOB/U3Wg8d7gG7FR4NK/hrp199/vMbNr7/BOfH/Xuu6JariSFNKll9zQSBw=="],
 
     "zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
 
diff --git a/components.d.ts b/components.d.ts
index 231609011..e91c62326 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -35,6 +35,7 @@ declare module 'vue' {
     IconLucideALargeSmall: typeof import('~icons/lucide/a-large-small')['default']
     IconLucideAlertTriangle: typeof import('~icons/lucide/alert-triangle')['default']
     IconLucideAlignCenter: typeof import('~icons/lucide/align-center')['default']
+    IconLucideAlignHorizontalDistributeCenter: typeof import('~icons/lucide/align-horizontal-distribute-center')['default']
     IconLucideAlignHorizontalJustifyCenter: typeof import('~icons/lucide/align-horizontal-justify-center')['default']
     IconLucideAlignHorizontalJustifyEnd: typeof import('~icons/lucide/align-horizontal-justify-end')['default']
     IconLucideAlignHorizontalJustifyStart: typeof import('~icons/lucide/align-horizontal-justify-start')['default']
@@ -46,6 +47,10 @@ declare module 'vue' {
     IconLucideArrowDown: typeof import('~icons/lucide/arrow-down')['default']
     IconLucideArrowRight: typeof import('~icons/lucide/arrow-right')['default']
     IconLucideBaseline: typeof import('~icons/lucide/baseline')['default']
+    IconLucideBetweenHorizontalEnd: typeof import('~icons/lucide/between-horizontal-end')['default']
+    IconLucideBetweenHorizontalStart: typeof import('~icons/lucide/between-horizontal-start')['default']
+    IconLucideBetweenVerticalEnd: typeof import('~icons/lucide/between-vertical-end')['default']
+    IconLucideBetweenVerticalStart: typeof import('~icons/lucide/between-vertical-start')['default']
     IconLucideBlend: typeof import('~icons/lucide/blend')['default']
     IconLucideBold: typeof import('~icons/lucide/bold')['default']
     IconLucideBot: typeof import('~icons/lucide/bot')['default']
@@ -64,10 +69,14 @@ declare module 'vue' {
     IconLucideItalic: typeof import('~icons/lucide/italic')['default']
     IconLucideKeyRound: typeof import('~icons/lucide/key-round')['default']
     IconLucideLayers: typeof import('~icons/lucide/layers')['default']
+    IconLucideLayoutGrid: typeof import('~icons/lucide/layout-grid')['default']
     IconLucideLink: typeof import('~icons/lucide/link')['default']
     IconLucideLoaderCircle: typeof import('~icons/lucide/loader-circle')['default']
     IconLucideMenu: typeof import('~icons/lucide/menu')['default']
     IconLucideMessageCircle: typeof import('~icons/lucide/message-circle')['default']
+    IconLucideMinus: typeof import('~icons/lucide/minus')['default']
+    IconLucideMoveHorizontal: typeof import('~icons/lucide/move-horizontal')['default']
+    IconLucideMoveVertical: typeof import('~icons/lucide/move-vertical')['default']
     IconLucidePlus: typeof import('~icons/lucide/plus')['default']
     IconLucideRadius: typeof import('~icons/lucide/radius')['default']
     IconLucideRedo2: typeof import('~icons/lucide/redo2')['default']
@@ -79,6 +88,7 @@ declare module 'vue' {
     IconLucideShare2: typeof import('~icons/lucide/share2')['default']
     IconLucideSidebar: typeof import('~icons/lucide/sidebar')['default']
     IconLucideSlidersHorizontal: typeof import('~icons/lucide/sliders-horizontal')['default']
+    IconLucideSpace: typeof import('~icons/lucide/space')['default']
     IconLucideSparkles: typeof import('~icons/lucide/sparkles')['default']
     IconLucideSquare: typeof import('~icons/lucide/square')['default']
     IconLucideStrikethrough: typeof import('~icons/lucide/strikethrough')['default']
diff --git a/package.json b/package.json
index 2a1667175..2daa87eae 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
     "y-indexeddb": "^9.0.12",
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.29",
-    "yoga-layout": "^3.2.1"
+    "yoga-layout": "npm:@open-pencil/yoga-layout@3.3.0-grid.2"
   },
   "devDependencies": {
     "@agentclientprotocol/sdk": "^0.14.1",
diff --git a/packages/core/package.json b/packages/core/package.json
index ae1982248..49de6997f 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -41,7 +41,7 @@
     "diff": "^8.0.3",
     "fflate": "^0.8.2",
     "fzstd": "^0.1.1",
-    "yoga-layout": "^3.2.1"
+    "yoga-layout": "npm:@open-pencil/yoga-layout@3.3.0-grid.2"
   },
   "devDependencies": {
     "@types/culori": "^4.0.1",
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 1c7db5823..e4563f72d 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -24,6 +24,9 @@ export {
   type LayoutAlign,
   type LayoutCounterAlign,
   type LayoutWrap,
+  type GridTrack,
+  type GridTrackSizing,
+  type GridPosition,
   type ConstraintType,
   type TextAutoResize,
   type TextAlignVertical,
diff --git a/packages/core/src/kiwi-serialize.ts b/packages/core/src/kiwi-serialize.ts
index 8d02ef7e3..a1a6ed733 100644
--- a/packages/core/src/kiwi-serialize.ts
+++ b/packages/core/src/kiwi-serialize.ts
@@ -279,7 +279,7 @@ export function sceneNodeToKiwi(
     if (node.clipsContent) nc.clipsContent = true
   }
 
-  if (node.layoutMode !== 'NONE') {
+  if (node.layoutMode !== 'NONE' && node.layoutMode !== 'GRID') {
     nc.stackMode = node.layoutMode
     nc.stackSpacing = node.itemSpacing
     nc.stackVerticalPadding = node.paddingTop
diff --git a/packages/core/src/layout.ts b/packages/core/src/layout.ts
index 71b80b911..3e564c898 100644
--- a/packages/core/src/layout.ts
+++ b/packages/core/src/layout.ts
@@ -3,6 +3,7 @@ import Yoga, {
   Direction,
   Display,
   FlexDirection,
+  GridTrackType,
   Gutter,
   Justify,
   Edge,
@@ -10,7 +11,7 @@ import Yoga, {
   type Node as YogaNode
 } from 'yoga-layout'
 
-import type { SceneGraph, SceneNode } from './scene-graph'
+import type { GridTrack, SceneGraph, SceneNode } from './scene-graph'
 
 export type TextMeasurer = (node: SceneNode) => { width: number; height: number } | null
 
@@ -24,7 +25,8 @@ export function computeLayout(graph: SceneGraph, frameId: string): void {
   const frame = graph.getNode(frameId)
   if (!frame || frame.layoutMode === 'NONE') return
 
-  const yogaRoot = buildYogaTree(graph, frame)
+  const yogaRoot =
+    frame.layoutMode === 'GRID' ? buildGridTree(graph, frame) : buildYogaTree(graph, frame)
   yogaRoot.calculateLayout(undefined, undefined, Direction.LTR)
   applyYogaLayout(graph, frame, yogaRoot)
   freeYogaTree(yogaRoot)
@@ -49,6 +51,77 @@ function computeLayoutsBottomUp(graph: SceneGraph, nodeId: string, visited: Set<
   }
 }
 
+// --- Grid layout ---
+
+function mapGridTrack(track: GridTrack): { type: GridTrackType; value: number } {
+  switch (track.sizing) {
+    case 'FR':
+      return { type: GridTrackType.Fr, value: track.value }
+    case 'FIXED':
+      return { type: GridTrackType.Points, value: track.value }
+    case 'AUTO':
+      return { type: GridTrackType.Auto, value: 0 }
+  }
+}
+
+function configureAsGrid(yogaNode: YogaNode, node: SceneNode): void {
+  yogaNode.setDisplay(Display.Grid)
+  yogaNode.setWidth(node.width)
+  yogaNode.setHeight(node.height)
+
+  if (node.gridTemplateColumns.length > 0) {
+    yogaNode.setGridTemplateColumns(node.gridTemplateColumns.map(mapGridTrack))
+  }
+  if (node.gridTemplateRows.length > 0) {
+    yogaNode.setGridTemplateRows(node.gridTemplateRows.map(mapGridTrack))
+  }
+
+  yogaNode.setGap(Gutter.Column, node.gridColumnGap)
+  yogaNode.setGap(Gutter.Row, node.gridRowGap)
+
+  yogaNode.setPadding(Edge.Top, node.paddingTop)
+  yogaNode.setPadding(Edge.Right, node.paddingRight)
+  yogaNode.setPadding(Edge.Bottom, node.paddingBottom)
+  yogaNode.setPadding(Edge.Left, node.paddingLeft)
+}
+
+function createGridChildNode(child: SceneNode): YogaNode {
+  const yogaChild = Yoga.Node.create()
+  if (!child.visible) {
+    yogaChild.setDisplay(Display.None)
+  } else {
+    const pos = child.gridPosition
+    if (pos) {
+      yogaChild.setGridColumnStart(pos.column)
+      yogaChild.setGridColumnEndSpan(pos.columnSpan)
+      yogaChild.setGridRowStart(pos.row)
+      yogaChild.setGridRowEndSpan(pos.rowSpan)
+    }
+    if (child.layoutGrow > 0 || child.layoutAlignSelf === 'STRETCH') {
+      yogaChild.setFlexGrow(1)
+    } else {
+      yogaChild.setWidth(child.width)
+      yogaChild.setHeight(child.height)
+    }
+  }
+  return yogaChild
+}
+
+function buildGridTree(graph: SceneGraph, frame: SceneNode): YogaNode {
+  const root = Yoga.Node.create()
+  configureAsGrid(root, frame)
+
+  const children = graph.getChildren(frame.id)
+  for (const child of children) {
+    if (child.layoutPositioning === 'ABSOLUTE') continue
+    root.insertChild(createGridChildNode(child), root.getChildCount())
+  }
+
+  return root
+}
+
+// --- Flex layout ---
+
 function buildYogaTree(graph: SceneGraph, frame: SceneNode): YogaNode {
   const root = Yoga.Node.create()
 
@@ -92,6 +165,8 @@ function buildYogaTree(graph: SceneGraph, frame: SceneNode): YogaNode {
 
     if (!child.visible) {
       yogaChild.setDisplay(Display.None)
+    } else if (child.layoutMode === 'GRID') {
+      configureChildAsGrid(yogaChild, child, frame, graph)
     } else if (child.layoutMode !== 'NONE') {
       configureChildAsAutoLayout(yogaChild, child, frame, graph)
     } else {
@@ -104,6 +179,28 @@ function buildYogaTree(graph: SceneGraph, frame: SceneNode): YogaNode {
   return root
 }
 
+function configureChildAsGrid(
+  yogaChild: YogaNode,
+  child: SceneNode,
+  _parent: SceneNode,
+  graph: SceneGraph
+): void {
+  configureAsGrid(yogaChild, child)
+
+  if (child.layoutGrow > 0) {
+    yogaChild.setFlexGrow(child.layoutGrow)
+  }
+  if (child.layoutAlignSelf === 'STRETCH') {
+    yogaChild.setAlignSelf(Align.Stretch)
+  }
+
+  const grandchildren = graph.getChildren(child.id)
+  for (const gc of grandchildren) {
+    if (gc.layoutPositioning === 'ABSOLUTE') continue
+    yogaChild.insertChild(createGridChildNode(gc), yogaChild.getChildCount())
+  }
+}
+
 function configureChildAsAutoLayout(
   yogaChild: YogaNode,
   child: SceneNode,
@@ -168,9 +265,10 @@ function configureChildAsLeaf(yogaChild: YogaNode, child: SceneNode, parent: Sce
   const isRow = parent.layoutMode === 'HORIZONTAL'
   const stretchCross = child.layoutAlignSelf === 'STRETCH' || parent.counterAxisAlign === 'STRETCH'
 
-  const measured = child.type === 'TEXT' && child.textAutoResize === 'WIDTH_AND_HEIGHT'
-    ? measureTextSize(child)
-    : null
+  const measured =
+    child.type === 'TEXT' && child.textAutoResize === 'WIDTH_AND_HEIGHT'
+      ? measureTextSize(child)
+      : null
   const w = measured ? measured.width : child.width
   const h = child.height
 
@@ -228,21 +326,23 @@ function setSizing(
 }
 
 function applyYogaLayout(graph: SceneGraph, frame: SceneNode, yogaNode: YogaNode): void {
-  if (frame.primaryAxisSizing === 'HUG' || frame.counterAxisSizing === 'HUG') {
-    const computedW = yogaNode.getComputedWidth()
-    const computedH = yogaNode.getComputedHeight()
-    const updates: Partial<SceneNode> = {}
+  if (frame.layoutMode !== 'GRID') {
+    if (frame.primaryAxisSizing === 'HUG' || frame.counterAxisSizing === 'HUG') {
+      const computedW = yogaNode.getComputedWidth()
+      const computedH = yogaNode.getComputedHeight()
+      const updates: Partial<SceneNode> = {}
 
-    if (frame.primaryAxisSizing === 'HUG') {
-      if (frame.layoutMode === 'HORIZONTAL') updates.width = computedW
-      else updates.height = computedH
-    }
-    if (frame.counterAxisSizing === 'HUG') {
-      if (frame.layoutMode === 'HORIZONTAL') updates.height = computedH
-      else updates.width = computedW
-    }
+      if (frame.primaryAxisSizing === 'HUG') {
+        if (frame.layoutMode === 'HORIZONTAL') updates.width = computedW
+        else updates.height = computedH
+      }
+      if (frame.counterAxisSizing === 'HUG') {
+        if (frame.layoutMode === 'HORIZONTAL') updates.height = computedH
+        else updates.width = computedW
+      }
 
-    graph.updateNode(frame.id, updates)
+      graph.updateNode(frame.id, updates)
+    }
   }
 
   const children = graph.getChildren(frame.id)
@@ -271,7 +371,7 @@ function freeYogaTree(node: YogaNode): void {
   for (let i = node.getChildCount() - 1; i >= 0; i--) {
     freeYogaTree(node.getChild(i))
   }
-  node.free()
+  if ('free' in node) (node as { free(): void }).free()
 }
 
 function mapJustify(align: string): Justify {
diff --git a/packages/core/src/render/export-jsx.ts b/packages/core/src/render/export-jsx.ts
index 3a5dd6f81..2c7ebaad9 100644
--- a/packages/core/src/render/export-jsx.ts
+++ b/packages/core/src/render/export-jsx.ts
@@ -9,7 +9,16 @@ import {
   opacityToTw
 } from './tailwind'
 
-import type { SceneGraph, SceneNode, Fill, Stroke, Effect, NodeType, Color } from '../scene-graph'
+import type {
+  SceneGraph,
+  SceneNode,
+  Fill,
+  Stroke,
+  Effect,
+  NodeType,
+  Color,
+  GridTrack
+} from '../scene-graph'
 
 export type JSXFormat = 'openpencil' | 'tailwind'
 
@@ -115,7 +124,10 @@ function getNodeContext(node: SceneNode, graph: SceneGraph) {
   const parent = node.parentId ? graph.getNode(node.parentId) : null
   return {
     isAutoLayout: node.layoutMode !== 'NONE',
-    parentIsAutoLayout: parent ? parent.layoutMode !== 'NONE' : false
+    isGrid: node.layoutMode === 'GRID',
+    isFlex: node.layoutMode === 'HORIZONTAL' || node.layoutMode === 'VERTICAL',
+    parentIsAutoLayout: parent ? parent.layoutMode !== 'NONE' : false,
+    parentIsGrid: parent ? parent.layoutMode === 'GRID' : false
   }
 }
 
@@ -160,17 +172,40 @@ function collectCornerRadii(node: SceneNode): CornerRadii | null {
   return { tl: r, tr: r, br: r, bl: r }
 }
 
+function formatTrack(t: GridTrack): string {
+  if (t.sizing === 'FR') return `${t.value}fr`
+  if (t.sizing === 'FIXED') return `${t.value}px`
+  return 'auto'
+}
+
+function formatTracks(tracks: GridTrack[]): string {
+  return tracks.map(formatTrack).join(' ')
+}
+
 // --- OpenPencil format ---
 
 function collectProps(node: SceneNode, graph: SceneGraph): [string, unknown][] {
   const props: [string, unknown][] = []
-  const { isAutoLayout, parentIsAutoLayout } = getNodeContext(node, graph)
+  const { isAutoLayout, isGrid, isFlex, parentIsAutoLayout, parentIsGrid } = getNodeContext(
+    node,
+    graph
+  )
 
   if (node.name && node.name !== node.type) {
     props.push(['name', node.name])
   }
 
-  if (isAutoLayout) {
+  if (isGrid) {
+    props.push(['grid', true])
+    if (node.gridTemplateColumns.length > 0)
+      props.push(['columns', formatTracks(node.gridTemplateColumns)])
+    if (node.gridTemplateRows.length > 0)
+      props.push(['rows', formatTracks(node.gridTemplateRows)])
+    if (node.width > 0) props.push(['w', node.width])
+    if (node.height > 0) props.push(['h', node.height])
+    if (node.gridColumnGap > 0) props.push(['columnGap', node.gridColumnGap])
+    if (node.gridRowGap > 0) props.push(['rowGap', node.gridRowGap])
+  } else if (isFlex) {
     props.push(['flex', node.layoutMode === 'HORIZONTAL' ? 'row' : 'col'])
     const primaryAxis = node.layoutMode === 'HORIZONTAL' ? 'width' : 'height'
     const crossAxis = node.layoutMode === 'HORIZONTAL' ? 'height' : 'width'
@@ -190,14 +225,23 @@ function collectProps(node: SceneNode, graph: SceneGraph): [string, unknown][] {
   }
 
   if (parentIsAutoLayout && node.layoutGrow > 0) props.push(['grow', node.layoutGrow])
-  if (isAutoLayout && node.itemSpacing > 0) props.push(['gap', node.itemSpacing])
 
-  if (isAutoLayout && node.layoutWrap === 'WRAP') {
+  if (parentIsGrid && node.gridPosition) {
+    const pos = node.gridPosition
+    if (pos.column > 0) props.push(['colStart', pos.column])
+    if (pos.row > 0) props.push(['rowStart', pos.row])
+    if (pos.columnSpan > 1) props.push(['colSpan', pos.columnSpan])
+    if (pos.rowSpan > 1) props.push(['rowSpan', pos.rowSpan])
+  }
+
+  if (isFlex && node.itemSpacing > 0) props.push(['gap', node.itemSpacing])
+
+  if (isFlex && node.layoutWrap === 'WRAP') {
     props.push(['wrap', true])
     if (node.counterAxisSpacing > 0) props.push(['rowGap', node.counterAxisSpacing])
   }
 
-  if (isAutoLayout) {
+  if (isFlex) {
     if (node.primaryAxisAlign === 'CENTER') props.push(['justify', 'center'])
     else if (node.primaryAxisAlign === 'MAX') props.push(['justify', 'end'])
     else if (node.primaryAxisAlign === 'SPACE_BETWEEN') props.push(['justify', 'between'])
@@ -205,7 +249,9 @@ function collectProps(node: SceneNode, graph: SceneGraph): [string, unknown][] {
     if (node.counterAxisAlign === 'CENTER') props.push(['items', 'center'])
     else if (node.counterAxisAlign === 'MAX') props.push(['items', 'end'])
     else if (node.counterAxisAlign === 'STRETCH') props.push(['items', 'stretch'])
+  }
 
+  if (isAutoLayout) {
     const pad = collectPadding(node)
     if (pad) {
       props.push(
@@ -304,11 +350,30 @@ function twRounded(prefix: string, px: number): string {
   return r ? `${prefix}-${r}` : prefix
 }
 
+function gridTemplateTw(tracks: GridTrack[]): string {
+  const allEqual1Fr = tracks.every((t) => t.sizing === 'FR' && t.value === 1)
+  if (allEqual1Fr) return String(tracks.length)
+  return `[${tracks.map(formatTrack).join('_')}]`
+}
+
 function collectTailwindClasses(node: SceneNode, graph: SceneGraph): string[] {
   const classes: string[] = []
-  const { isAutoLayout, parentIsAutoLayout } = getNodeContext(node, graph)
+  const { isAutoLayout, isGrid, isFlex, parentIsAutoLayout, parentIsGrid } = getNodeContext(
+    node,
+    graph
+  )
 
-  if (isAutoLayout) {
+  if (isGrid) {
+    classes.push('grid')
+    if (node.gridTemplateColumns.length > 0)
+      classes.push(`grid-cols-${gridTemplateTw(node.gridTemplateColumns)}`)
+    if (node.gridTemplateRows.length > 0)
+      classes.push(`grid-rows-${gridTemplateTw(node.gridTemplateRows)}`)
+    if (node.width > 0) classes.push(`w-${pxToSpacing(node.width)}`)
+    if (node.height > 0) classes.push(`h-${pxToSpacing(node.height)}`)
+    if (node.gridColumnGap > 0) classes.push(`gap-x-${pxToSpacing(node.gridColumnGap)}`)
+    if (node.gridRowGap > 0) classes.push(`gap-y-${pxToSpacing(node.gridRowGap)}`)
+  } else if (isFlex) {
     classes.push('flex')
     if (node.layoutMode === 'VERTICAL') classes.push('flex-col')
 
@@ -330,14 +395,23 @@ function collectTailwindClasses(node: SceneNode, graph: SceneGraph): string[] {
   }
 
   if (parentIsAutoLayout && node.layoutGrow > 0) classes.push('grow')
-  if (isAutoLayout && node.itemSpacing > 0) classes.push(`gap-${pxToSpacing(node.itemSpacing)}`)
 
-  if (isAutoLayout && node.layoutWrap === 'WRAP') {
+  if (parentIsGrid && node.gridPosition) {
+    const pos = node.gridPosition
+    if (pos.column > 0) classes.push(`col-start-${pos.column}`)
+    if (pos.row > 0) classes.push(`row-start-${pos.row}`)
+    if (pos.columnSpan > 1) classes.push(`col-span-${pos.columnSpan}`)
+    if (pos.rowSpan > 1) classes.push(`row-span-${pos.rowSpan}`)
+  }
+
+  if (isFlex && node.itemSpacing > 0) classes.push(`gap-${pxToSpacing(node.itemSpacing)}`)
+
+  if (isFlex && node.layoutWrap === 'WRAP') {
     classes.push('flex-wrap')
     if (node.counterAxisSpacing > 0) classes.push(`gap-y-${pxToSpacing(node.counterAxisSpacing)}`)
   }
 
-  if (isAutoLayout) {
+  if (isFlex) {
     if (node.primaryAxisAlign === 'CENTER') classes.push('justify-center')
     else if (node.primaryAxisAlign === 'MAX') classes.push('justify-end')
     else if (node.primaryAxisAlign === 'SPACE_BETWEEN') classes.push('justify-between')
@@ -345,7 +419,9 @@ function collectTailwindClasses(node: SceneNode, graph: SceneGraph): string[] {
     if (node.counterAxisAlign === 'CENTER') classes.push('items-center')
     else if (node.counterAxisAlign === 'MAX') classes.push('items-end')
     else if (node.counterAxisAlign === 'STRETCH') classes.push('items-stretch')
+  }
 
+  if (isAutoLayout) {
     const pad = collectPadding(node)
     if (pad) {
       classes.push(
diff --git a/packages/core/src/scene-graph.ts b/packages/core/src/scene-graph.ts
index efd812842..814592631 100644
--- a/packages/core/src/scene-graph.ts
+++ b/packages/core/src/scene-graph.ts
@@ -158,8 +158,22 @@ export interface ArcData {
   innerRadius: number
 }
 
-export type LayoutMode = 'NONE' | 'HORIZONTAL' | 'VERTICAL'
+export type LayoutMode = 'NONE' | 'HORIZONTAL' | 'VERTICAL' | 'GRID'
 export type LayoutSizing = 'FIXED' | 'HUG' | 'FILL'
+
+export type GridTrackSizing = 'FIXED' | 'FR' | 'AUTO'
+
+export interface GridTrack {
+  sizing: GridTrackSizing
+  value: number
+}
+
+export interface GridPosition {
+  column: number
+  row: number
+  columnSpan: number
+  rowSpan: number
+}
 export type LayoutAlign = 'MIN' | 'CENTER' | 'MAX' | 'SPACE_BETWEEN'
 export type LayoutCounterAlign = 'MIN' | 'CENTER' | 'MAX' | 'STRETCH' | 'BASELINE'
 export type LayoutWrap = 'NO_WRAP' | 'WRAP'
@@ -257,6 +271,12 @@ export interface SceneNode {
   isMask: boolean
   maskType: MaskType
 
+  gridTemplateColumns: GridTrack[]
+  gridTemplateRows: GridTrack[]
+  gridColumnGap: number
+  gridRowGap: number
+  gridPosition: GridPosition | null
+
   counterAxisAlignContent: 'AUTO' | 'SPACE_BETWEEN'
   itemReverseZIndex: boolean
   strokesIncludedInLayout: boolean
@@ -390,6 +410,11 @@ function createDefaultNode(type: NodeType, overrides: Partial<SceneNode> = {}):
     maxHeight: null,
     isMask: false,
     maskType: 'ALPHA',
+    gridTemplateColumns: [],
+    gridTemplateRows: [],
+    gridColumnGap: 0,
+    gridRowGap: 0,
+    gridPosition: null,
     counterAxisAlignContent: 'AUTO',
     itemReverseZIndex: false,
     strokesIncludedInLayout: false,
@@ -922,6 +947,11 @@ export class SceneGraph {
     'paddingRight',
     'paddingBottom',
     'paddingLeft',
+    'gridTemplateColumns',
+    'gridTemplateRows',
+    'gridColumnGap',
+    'gridRowGap',
+    'gridPosition',
     'clipsContent',
     'independentStrokeWeights',
     'borderTopWeight',
diff --git a/src/components/properties/LayoutSection.vue b/src/components/properties/LayoutSection.vue
index 0329464fa..6251c2ae6 100644
--- a/src/components/properties/LayoutSection.vue
+++ b/src/components/properties/LayoutSection.vue
@@ -5,7 +5,13 @@ import AppSelect from '@/components/AppSelect.vue'
 import ScrubInput from '@/components/ScrubInput.vue'
 import { useNodeProps } from '@/composables/use-node-props'
 
-import type { SceneNode, LayoutSizing, LayoutAlign, LayoutCounterAlign } from '@open-pencil/core'
+import type {
+  SceneNode,
+  LayoutSizing,
+  LayoutAlign,
+  LayoutCounterAlign,
+  GridTrack
+} from '@open-pencil/core'
 
 const { store, node, updateProp, commitProp } = useNodeProps()
 
@@ -17,8 +23,13 @@ const isInAutoLayout = computed(() => {
   return parent ? parent.layoutMode !== 'NONE' : false
 })
 
+const isGrid = computed(() => node.value.layoutMode === 'GRID')
+const isFlex = computed(
+  () => node.value.layoutMode === 'HORIZONTAL' || node.value.layoutMode === 'VERTICAL'
+)
+
 const widthSizing = computed<LayoutSizing>(() => {
-  if (node.value.layoutMode !== 'NONE') {
+  if (isFlex.value) {
     return node.value.layoutMode === 'HORIZONTAL'
       ? node.value.primaryAxisSizing
       : node.value.counterAxisSizing
@@ -28,7 +39,7 @@ const widthSizing = computed<LayoutSizing>(() => {
 })
 
 const heightSizing = computed<LayoutSizing>(() => {
-  if (node.value.layoutMode !== 'NONE') {
+  if (isFlex.value) {
     return node.value.layoutMode === 'VERTICAL'
       ? node.value.primaryAxisSizing
       : node.value.counterAxisSizing
@@ -38,7 +49,7 @@ const heightSizing = computed<LayoutSizing>(() => {
 })
 
 function setWidthSizing(sizing: LayoutSizing) {
-  if (node.value.layoutMode !== 'NONE') {
+  if (isFlex.value) {
     if (node.value.layoutMode === 'HORIZONTAL') updateProp('primaryAxisSizing', sizing)
     else updateProp('counterAxisSizing', sizing)
   } else if (isInAutoLayout.value) {
@@ -47,7 +58,7 @@ function setWidthSizing(sizing: LayoutSizing) {
 }
 
 function setHeightSizing(sizing: LayoutSizing) {
-  if (node.value.layoutMode !== 'NONE') {
+  if (isFlex.value) {
     if (node.value.layoutMode === 'VERTICAL') updateProp('primaryAxisSizing', sizing)
     else updateProp('counterAxisSizing', sizing)
   } else if (isInAutoLayout.value) {
@@ -87,23 +98,25 @@ function commitUniformPadding(_value: number, previous: number) {
 
 const widthSizingOptions = computed(() => {
   const options: { value: LayoutSizing; label: string }[] = [
-    { value: 'FIXED', label: `Fixed width (${Math.round(node.value.width)})` }
+    { value: 'FIXED', label: 'Fixed' }
   ]
-  if (node.value.layoutMode !== 'NONE') options.push({ value: 'HUG', label: 'Hug contents' })
-  if (isInAutoLayout.value) options.push({ value: 'FILL', label: 'Fill container' })
+  if (isFlex.value) options.push({ value: 'HUG', label: 'Hug' })
+  if (isInAutoLayout.value || isFlex.value) options.push({ value: 'FILL', label: 'Fill' })
   return options
 })
 
 const heightSizingOptions = computed(() => {
   const options: { value: LayoutSizing; label: string }[] = [
-    { value: 'FIXED', label: `Fixed height (${Math.round(node.value.height)})` }
+    { value: 'FIXED', label: 'Fixed' }
   ]
-  if (node.value.layoutMode !== 'NONE') options.push({ value: 'HUG', label: 'Hug contents' })
-  if (isInAutoLayout.value) options.push({ value: 'FILL', label: 'Fill container' })
+  if (isFlex.value) options.push({ value: 'HUG', label: 'Hug' })
+  if (isInAutoLayout.value || isFlex.value) options.push({ value: 'FILL', label: 'Fill' })
   return options
 })
 
-const ALIGN_GRID: Array<{ primary: LayoutAlign; counter: LayoutCounterAlign }> = [
+type AlignCell = { primary: LayoutAlign; counter: LayoutCounterAlign }
+
+const ALIGN_HORIZONTAL: AlignCell[] = [
   { primary: 'MIN', counter: 'MIN' },
   { primary: 'CENTER', counter: 'MIN' },
   { primary: 'MAX', counter: 'MIN' },
@@ -115,6 +128,22 @@ const ALIGN_GRID: Array<{ primary: LayoutAlign; counter: LayoutCounterAlign }> =
   { primary: 'MAX', counter: 'MAX' }
 ]
 
+const ALIGN_VERTICAL: AlignCell[] = [
+  { primary: 'MIN', counter: 'MIN' },
+  { primary: 'MIN', counter: 'CENTER' },
+  { primary: 'MIN', counter: 'MAX' },
+  { primary: 'CENTER', counter: 'MIN' },
+  { primary: 'CENTER', counter: 'CENTER' },
+  { primary: 'CENTER', counter: 'MAX' },
+  { primary: 'MAX', counter: 'MIN' },
+  { primary: 'MAX', counter: 'CENTER' },
+  { primary: 'MAX', counter: 'MAX' }
+]
+
+const alignGrid = computed(() =>
+  node.value.layoutMode === 'VERTICAL' ? ALIGN_VERTICAL : ALIGN_HORIZONTAL
+)
+
 function setAlignment(primary: LayoutAlign, counter: LayoutCounterAlign) {
   store.updateNodeWithUndo(
     node.value.id,
@@ -122,6 +151,40 @@ function setAlignment(primary: LayoutAlign, counter: LayoutCounterAlign) {
     'Change alignment'
   )
 }
+
+// --- Grid helpers ---
+
+const TRACK_SIZING_OPTIONS = [
+  { value: 'FR' as const, label: 'Fill (fr)' },
+  { value: 'FIXED' as const, label: 'Fixed (px)' },
+  { value: 'AUTO' as const, label: 'Auto' }
+]
+
+function updateGridTrack(
+  prop: 'gridTemplateColumns' | 'gridTemplateRows',
+  index: number,
+  updates: Partial<GridTrack>
+) {
+  const tracks = [...node.value[prop]]
+  tracks[index] = { ...tracks[index], ...updates }
+  store.updateNodeWithUndo(node.value.id, { [prop]: tracks }, 'Change grid track')
+}
+
+function addTrack(prop: 'gridTemplateColumns' | 'gridTemplateRows') {
+  const tracks = [...node.value[prop], { sizing: 'FR' as const, value: 1 }]
+  store.updateNodeWithUndo(node.value.id, { [prop]: tracks }, 'Add grid track')
+}
+
+function removeTrack(prop: 'gridTemplateColumns' | 'gridTemplateRows', index: number) {
+  const tracks = node.value[prop].filter((_: GridTrack, i: number) => i !== index)
+  store.updateNodeWithUndo(node.value.id, { [prop]: tracks }, 'Remove grid track')
+}
+
+function trackLabel(track: GridTrack): string {
+  if (track.sizing === 'FR') return `${track.value}fr`
+  if (track.sizing === 'FIXED') return `${track.value}px`
+  return 'Auto'
+}
 </script>
 
 <template>
@@ -137,7 +200,7 @@ function setAlignment(primary: LayoutAlign, counter: LayoutCounterAlign) {
           @commit="(v: number, p: number) => commitProp('width', v, p)"
         />
         <AppSelect
-          v-if="node.layoutMode !== 'NONE' || isInAutoLayout"
+          v-if="isFlex || isInAutoLayout"
           :model-value="widthSizing"
           :options="widthSizingOptions"
           @update:model-value="setWidthSizing"
@@ -153,7 +216,7 @@ function setAlignment(primary: LayoutAlign, counter: LayoutCounterAlign) {
           @commit="(v: number, p: number) => commitProp('height', v, p)"
         />
         <AppSelect
-          v-if="node.layoutMode !== 'NONE' || isInAutoLayout"
+          v-if="isFlex || isInAutoLayout"
           :model-value="heightSizing"
           :options="heightSizingOptions"
           @update:model-value="setHeightSizing"
@@ -186,6 +249,7 @@ function setAlignment(primary: LayoutAlign, counter: LayoutCounterAlign) {
     </div>
 
     <template v-if="node.layoutMode !== 'NONE'">
+      <!-- Flow direction buttons -->
       <div class="mt-1.5 flex gap-0.5">
         <button
           data-test-id="layout-direction-horizontal"
@@ -214,6 +278,20 @@ function setAlignment(primary: LayoutAlign, counter: LayoutCounterAlign) {
           <icon-lucide-arrow-down class="size-3.5" />
         </button>
         <button
+          data-test-id="layout-direction-grid"
+          class="flex cursor-pointer items-center justify-center rounded border px-2 py-1"
+          :class="
+            isGrid
+              ? 'border-accent bg-accent/10 text-accent'
+              : 'border-border text-muted hover:bg-hover hover:text-surface'
+          "
+          title="Grid layout"
+          @click="store.setLayoutMode(node.id, 'GRID')"
+        >
+          <icon-lucide-layout-grid class="size-3.5" />
+        </button>
+        <button
+          v-if="isFlex"
           data-test-id="layout-direction-wrap"
           class="flex cursor-pointer items-center justify-center rounded border px-2 py-1"
           :class="
@@ -228,75 +306,201 @@ function setAlignment(primary: LayoutAlign, counter: LayoutCounterAlign) {
         </button>
       </div>
 
-      <div class="mt-2 grid grid-cols-2 gap-1.5">
-        <ScrubInput
-          data-test-id="layout-gap-input"
-          icon="Gap"
-          :model-value="Math.round(node.itemSpacing)"
-          :min="0"
-          @update:model-value="updateProp('itemSpacing', $event)"
-          @commit="(v: number, p: number) => commitProp('itemSpacing', v, p)"
-        />
+      <!-- Grid-specific controls -->
+      <template v-if="isGrid">
+        <!-- Column tracks -->
+        <div class="mt-2">
+          <div class="mb-1 flex items-center justify-between">
+            <label class="text-[11px] text-muted">Columns</label>
+            <button
+              class="cursor-pointer rounded border-none bg-transparent px-1 text-xs leading-none text-muted hover:bg-hover hover:text-surface"
+              title="Add column"
+              @click="addTrack('gridTemplateColumns')"
+            >
+              +
+            </button>
+          </div>
+          <div class="flex flex-col gap-1">
+            <div
+              v-for="(col, i) in node.gridTemplateColumns"
+              :key="i"
+              class="flex items-center gap-1"
+            >
+              <ScrubInput
+                v-if="col.sizing !== 'AUTO'"
+                class="flex-1"
+                :icon="`C${i + 1}`"
+                :model-value="col.value"
+                :min="col.sizing === 'FR' ? 1 : 0"
+                :step="col.sizing === 'FR' ? 1 : 1"
+                :suffix="col.sizing === 'FR' ? 'fr' : 'px'"
+                @update:model-value="updateGridTrack('gridTemplateColumns', i, { value: $event })"
+              />
+              <span v-else class="flex-1 px-1 text-xs text-muted">{{ trackLabel(col) }}</span>
+              <AppSelect
+                :model-value="col.sizing"
+                :options="TRACK_SIZING_OPTIONS"
+                @update:model-value="
+                  updateGridTrack('gridTemplateColumns', i, {
+                    sizing: $event,
+                    value: $event === 'FR' ? 1 : $event === 'FIXED' ? 100 : 0
+                  })
+                "
+              />
+              <button
+                v-if="node.gridTemplateColumns.length > 1"
+                class="cursor-pointer rounded border-none bg-transparent px-0.5 text-xs text-muted hover:text-surface"
+                title="Remove column"
+                @click="removeTrack('gridTemplateColumns', i)"
+              >
+                ×
+              </button>
+            </div>
+          </div>
+        </div>
 
-        <template v-if="hasUniformPadding() && !showIndividualPadding">
+        <!-- Row tracks -->
+        <div class="mt-2">
+          <div class="mb-1 flex items-center justify-between">
+            <label class="text-[11px] text-muted">Rows</label>
+            <button
+              class="cursor-pointer rounded border-none bg-transparent px-1 text-xs leading-none text-muted hover:bg-hover hover:text-surface"
+              title="Add row"
+              @click="addTrack('gridTemplateRows')"
+            >
+              +
+            </button>
+          </div>
+          <div class="flex flex-col gap-1">
+            <div v-for="(row, i) in node.gridTemplateRows" :key="i" class="flex items-center gap-1">
+              <ScrubInput
+                v-if="row.sizing !== 'AUTO'"
+                class="flex-1"
+                :icon="`R${i + 1}`"
+                :model-value="row.value"
+                :min="row.sizing === 'FR' ? 1 : 0"
+                :step="row.sizing === 'FR' ? 1 : 1"
+                :suffix="row.sizing === 'FR' ? 'fr' : 'px'"
+                @update:model-value="updateGridTrack('gridTemplateRows', i, { value: $event })"
+              />
+              <span v-else class="flex-1 px-1 text-xs text-muted">{{ trackLabel(row) }}</span>
+              <AppSelect
+                :model-value="row.sizing"
+                :options="TRACK_SIZING_OPTIONS"
+                @update:model-value="
+                  updateGridTrack('gridTemplateRows', i, {
+                    sizing: $event,
+                    value: $event === 'FR' ? 1 : $event === 'FIXED' ? 100 : 0
+                  })
+                "
+              />
+              <button
+                v-if="node.gridTemplateRows.length > 1"
+                class="cursor-pointer rounded border-none bg-transparent px-0.5 text-xs text-muted hover:text-surface"
+                title="Remove row"
+                @click="removeTrack('gridTemplateRows', i)"
+              >
+                ×
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Grid gaps -->
+        <div class="mt-2 grid grid-cols-2 gap-1.5">
+          <ScrubInput
+            icon="↔"
+            :model-value="Math.round(node.gridColumnGap)"
+            :min="0"
+            @update:model-value="updateProp('gridColumnGap', $event)"
+            @commit="(v: number, p: number) => commitProp('gridColumnGap', v, p)"
+          />
+          <ScrubInput
+            icon="↕"
+            :model-value="Math.round(node.gridRowGap)"
+            :min="0"
+            @update:model-value="updateProp('gridRowGap', $event)"
+            @commit="(v: number, p: number) => commitProp('gridRowGap', v, p)"
+          />
+        </div>
+      </template>
+
+      <!-- Flex-specific controls -->
+      <template v-if="isFlex">
+        <div class="mt-2 flex items-center gap-1.5">
+          <ScrubInput
+            data-test-id="layout-gap-input"
+            class="flex-1"
+            :icon="node.layoutMode === 'VERTICAL' ? '↕' : '↔'"
+            :model-value="Math.round(node.itemSpacing)"
+            :min="0"
+            @update:model-value="updateProp('itemSpacing', $event)"
+            @commit="(v: number, p: number) => commitProp('itemSpacing', v, p)"
+          />
+          <button
+            class="flex size-7 shrink-0 cursor-pointer items-center justify-center rounded border border-border bg-transparent text-muted hover:bg-hover hover:text-surface"
+            :title="showIndividualPadding || !hasUniformPadding() ? 'Uniform padding' : 'Per-side padding'"
+            @click="showIndividualPadding = !showIndividualPadding"
+          >
+            <icon-lucide-minus v-if="showIndividualPadding || !hasUniformPadding()" class="size-3" />
+            <icon-lucide-plus v-else class="size-3" />
+          </button>
+        </div>
+
+        <div v-if="!showIndividualPadding && hasUniformPadding()" class="mt-1.5">
           <ScrubInput
             data-test-id="layout-uniform-padding-input"
-            icon="Pad"
+            icon="☐"
             :model-value="Math.round(node.paddingTop)"
             :min="0"
             @update:model-value="setUniformPadding"
             @commit="commitUniformPadding"
           />
-        </template>
-        <button
-          class="rounded border border-border bg-transparent px-2 py-1 text-left text-xs text-muted hover:bg-hover hover:text-surface"
-          @click="showIndividualPadding = !showIndividualPadding"
-        >
-          {{ showIndividualPadding ? 'Uniform padding' : 'Per-side padding' }}
-        </button>
-      </div>
+        </div>
+      </template>
 
-      <div
-        v-if="showIndividualPadding || !hasUniformPadding()"
-        class="mt-1.5 grid grid-cols-2 gap-1.5"
-      >
-        <ScrubInput
-          icon="Top"
-          :model-value="Math.round(node.paddingTop)"
-          :min="0"
-          @update:model-value="updateProp('paddingTop', $event)"
-          @commit="(v: number, p: number) => commitProp('paddingTop', v, p)"
-        />
-        <ScrubInput
-          icon="Right"
-          :model-value="Math.round(node.paddingRight)"
-          :min="0"
-          @update:model-value="updateProp('paddingRight', $event)"
-          @commit="(v: number, p: number) => commitProp('paddingRight', v, p)"
-        />
-        <ScrubInput
-          icon="Bottom"
-          :model-value="Math.round(node.paddingBottom)"
-          :min="0"
-          @update:model-value="updateProp('paddingBottom', $event)"
-          @commit="(v: number, p: number) => commitProp('paddingBottom', v, p)"
-        />
-        <ScrubInput
-          icon="Left"
-          :model-value="Math.round(node.paddingLeft)"
-          :min="0"
-          @update:model-value="updateProp('paddingLeft', $event)"
-          @commit="(v: number, p: number) => commitProp('paddingLeft', v, p)"
-        />
-      </div>
+      <!-- Per-side padding -->
+      <template v-if="isGrid || (isFlex && (showIndividualPadding || !hasUniformPadding()))">
+        <div class="mt-1.5 grid grid-cols-2 gap-1.5">
+          <ScrubInput
+            icon="T"
+            :model-value="Math.round(node.paddingTop)"
+            :min="0"
+            @update:model-value="updateProp('paddingTop', $event)"
+            @commit="(v: number, p: number) => commitProp('paddingTop', v, p)"
+          />
+          <ScrubInput
+            icon="R"
+            :model-value="Math.round(node.paddingRight)"
+            :min="0"
+            @update:model-value="updateProp('paddingRight', $event)"
+            @commit="(v: number, p: number) => commitProp('paddingRight', v, p)"
+          />
+          <ScrubInput
+            icon="B"
+            :model-value="Math.round(node.paddingBottom)"
+            :min="0"
+            @update:model-value="updateProp('paddingBottom', $event)"
+            @commit="(v: number, p: number) => commitProp('paddingBottom', v, p)"
+          />
+          <ScrubInput
+            icon="L"
+            :model-value="Math.round(node.paddingLeft)"
+            :min="0"
+            @update:model-value="updateProp('paddingLeft', $event)"
+            @commit="(v: number, p: number) => commitProp('paddingLeft', v, p)"
+          />
+        </div>
+      </template>
 
-      <div class="mt-2">
+      <!-- Alignment (flex only) -->
+      <div v-if="isFlex" class="mt-2">
         <label class="mb-1 block text-[11px] text-muted">Alignment</label>
-        <div data-test-id="layout-alignment-grid" class="grid grid-cols-3 gap-1">
+        <div data-test-id="layout-alignment-grid" class="grid w-fit grid-cols-3 gap-0.5">
           <button
-            v-for="cell in ALIGN_GRID"
+            v-for="cell in alignGrid"
             :key="`${cell.primary}-${cell.counter}`"
-            class="flex aspect-square cursor-pointer items-center justify-center rounded border text-[11px]"
+            class="flex size-6 cursor-pointer items-center justify-center rounded border text-[11px]"
             :class="
               node.primaryAxisAlign === cell.primary && node.counterAxisAlign === cell.counter
                 ? 'border-accent bg-accent/10 text-accent'
diff --git a/src/stores/editor.ts b/src/stores/editor.ts
index b2703cc9c..a3ce79092 100644
--- a/src/stores/editor.ts
+++ b/src/stores/editor.ts
@@ -986,12 +986,42 @@ export function createEditorStore() {
       counterAxisSizing: node.counterAxisSizing,
       primaryAxisAlign: node.primaryAxisAlign,
       counterAxisAlign: node.counterAxisAlign,
+      gridTemplateColumns: node.gridTemplateColumns,
+      gridTemplateRows: node.gridTemplateRows,
+      gridColumnGap: node.gridColumnGap,
+      gridRowGap: node.gridRowGap,
       width: node.width,
       height: node.height
     }
 
     const updates: Partial<SceneNode> = { layoutMode: mode }
-    if (mode !== 'NONE' && node.layoutMode === 'NONE') {
+    if (mode === 'GRID' && node.layoutMode !== 'GRID') {
+      const children = graph.getChildren(id)
+      const cols = Math.max(2, Math.ceil(Math.sqrt(children.length)))
+      const rows = Math.max(1, Math.ceil(children.length / cols))
+      updates.gridTemplateColumns = Array.from({ length: cols }, () => ({
+        sizing: 'FR' as const,
+        value: 1
+      }))
+      updates.gridTemplateRows = Array.from({ length: rows }, () => ({
+        sizing: 'FR' as const,
+        value: 1
+      }))
+      updates.gridColumnGap = 0
+      updates.gridRowGap = 0
+      updates.primaryAxisSizing = 'FIXED'
+      updates.counterAxisSizing = 'FIXED'
+      if (node.primaryAxisSizing === 'HUG' || node.counterAxisSizing === 'HUG') {
+        const maxChildW = Math.max(...children.map((c) => c.width), 100)
+        const maxChildH = Math.max(...children.map((c) => c.height), 100)
+        updates.width = maxChildW * cols
+        updates.height = maxChildH * rows
+      }
+      updates.paddingTop = 0
+      updates.paddingRight = 0
+      updates.paddingBottom = 0
+      updates.paddingLeft = 0
+    } else if (mode !== 'NONE' && node.layoutMode === 'NONE') {
       updates.itemSpacing = 0
       updates.paddingTop = 0
       updates.paddingRight = 0
@@ -1055,18 +1085,21 @@ export function createEditorStore() {
 
     const parentAbs = isTopLevel(parentId) ? { x: 0, y: 0 } : graph.getAbsolutePosition(parentId)
 
+    const direction: LayoutMode =
+      nodes.length <= 1 ? 'VERTICAL' : maxX - minX >= maxY - minY ? 'HORIZONTAL' : 'VERTICAL'
+
     const frame = graph.createNode('FRAME', parentId, {
       name: 'Frame',
       x: minX - parentAbs.x,
       y: minY - parentAbs.y,
       width: maxX - minX,
       height: maxY - minY,
-      layoutMode: 'VERTICAL',
+      layoutMode: direction,
       primaryAxisSizing: 'HUG',
       counterAxisSizing: 'HUG',
       primaryAxisAlign: 'MIN',
       counterAxisAlign: 'MIN',
-      fills: [{ type: 'SOLID', color: { r: 1, g: 1, b: 1, a: 1 }, opacity: 1, visible: true }]
+      fills: []
     })
     const frameId = frame.id
 
diff --git a/tests/engine/export-jsx.test.ts b/tests/engine/export-jsx.test.ts
index bd230244a..876446b5a 100644
--- a/tests/engine/export-jsx.test.ts
+++ b/tests/engine/export-jsx.test.ts
@@ -270,6 +270,91 @@ describe('sceneNodeToJSX', () => {
     expect(jsx).toContain('shadow="0 4 8')
     expect(jsx).toContain('blur={4}')
   })
+
+  test('grid layout frame', () => {
+    const graph = makeGraph()
+    const frame = graph.createNode('FRAME', pageId(graph), {
+      name: 'Grid',
+      width: 400,
+      height: 300,
+      layoutMode: 'GRID',
+      gridTemplateColumns: [
+        { sizing: 'FR', value: 1 },
+        { sizing: 'FR', value: 1 },
+        { sizing: 'FR', value: 1 }
+      ],
+      gridTemplateRows: [
+        { sizing: 'FR', value: 1 },
+        { sizing: 'FR', value: 1 }
+      ],
+      gridColumnGap: 16,
+      gridRowGap: 8,
+      paddingTop: 12,
+      paddingRight: 12,
+      paddingBottom: 12,
+      paddingLeft: 12
+    })
+    const jsx = sceneNodeToJSX(frame.id, graph)
+    expect(jsx).toContain('grid')
+    expect(jsx).toContain('columns="1fr 1fr 1fr"')
+    expect(jsx).toContain('rows="1fr 1fr"')
+    expect(jsx).toContain('columnGap={16}')
+    expect(jsx).toContain('rowGap={8}')
+    expect(jsx).toContain('p={12}')
+    expect(jsx).toContain('w={400}')
+    expect(jsx).not.toContain('flex')
+  })
+
+  test('grid with mixed track sizes', () => {
+    const graph = makeGraph()
+    const frame = graph.createNode('FRAME', pageId(graph), {
+      width: 600,
+      height: 400,
+      layoutMode: 'GRID',
+      gridTemplateColumns: [
+        { sizing: 'FIXED', value: 200 },
+        { sizing: 'FR', value: 1 },
+        { sizing: 'AUTO', value: 0 }
+      ],
+      gridTemplateRows: [],
+      gridColumnGap: 0,
+      gridRowGap: 0
+    })
+    const jsx = sceneNodeToJSX(frame.id, graph)
+    expect(jsx).toContain('columns="200px 1fr auto"')
+    expect(jsx).not.toContain('rows=')
+    expect(jsx).not.toContain('columnGap')
+  })
+
+  test('child grid position', () => {
+    const graph = makeGraph()
+    const frame = graph.createNode('FRAME', pageId(graph), {
+      width: 400,
+      height: 300,
+      layoutMode: 'GRID',
+      gridTemplateColumns: [
+        { sizing: 'FR', value: 1 },
+        { sizing: 'FR', value: 1 }
+      ],
+      gridTemplateRows: [
+        { sizing: 'FR', value: 1 },
+        { sizing: 'FR', value: 1 }
+      ],
+      gridColumnGap: 0,
+      gridRowGap: 0
+    })
+    const child = graph.createNode('RECTANGLE', frame.id, {
+      name: 'Span',
+      width: 100,
+      height: 50,
+      gridPosition: { column: 1, row: 2, columnSpan: 2, rowSpan: 1 }
+    })
+    const jsx = sceneNodeToJSX(child.id, graph)
+    expect(jsx).toContain('colStart={1}')
+    expect(jsx).toContain('rowStart={2}')
+    expect(jsx).toContain('colSpan={2}')
+    expect(jsx).not.toContain('rowSpan')
+  })
 })
 
 describe('selectionToJSX', () => {
diff --git a/tests/engine/layout.test.ts b/tests/engine/layout.test.ts
index 869e2fb20..1d3bc7024 100644
--- a/tests/engine/layout.test.ts
+++ b/tests/engine/layout.test.ts
@@ -1,6 +1,6 @@
 import { describe, test, expect } from 'bun:test'
 
-import { SceneGraph, type SceneNode, computeLayout, computeAllLayouts, setTextMeasurer } from '@open-pencil/core'
+import { SceneGraph, type SceneNode, type GridTrack, computeLayout, computeAllLayouts, setTextMeasurer } from '@open-pencil/core'
 
 function pageId(graph: SceneGraph) {
   return graph.getPages()[0].id
@@ -1049,3 +1049,363 @@ describe('Auto Layout', () => {
     })
   })
 })
+
+function gridFrame(
+  graph: SceneGraph,
+  parentId: string,
+  columns: GridTrack[],
+  rows: GridTrack[],
+  overrides: Partial<SceneNode> = {}
+): SceneNode {
+  return graph.createNode('FRAME', parentId, {
+    layoutMode: 'GRID',
+    width: 400,
+    height: 300,
+    gridTemplateColumns: columns,
+    gridTemplateRows: rows,
+    gridColumnGap: 0,
+    gridRowGap: 0,
+    ...overrides,
+  })
+}
+
+function fr(value = 1): GridTrack {
+  return { sizing: 'FR', value }
+}
+
+function fixed(value: number): GridTrack {
+  return { sizing: 'FIXED', value }
+}
+
+describe('Grid Layout', () => {
+  describe('basic grid', () => {
+    test('places children in 2x2 equal columns', () => {
+      const graph = new SceneGraph()
+      const frame = gridFrame(graph, pageId(graph), [fr(), fr()], [fr(), fr()])
+      for (let i = 0; i < 4; i++) rect(graph, frame.id, 50, 50)
+
+      computeLayout(graph, frame.id)
+
+      const children = graph.getChildren(frame.id)
+      // Row 1: (0,0) and (200,0)
+      expect(children[0].x).toBe(0)
+      expect(children[0].y).toBe(0)
+      expect(children[1].x).toBe(200)
+      expect(children[1].y).toBe(0)
+      // Row 2: (0,150) and (200,150)
+      expect(children[2].x).toBe(0)
+      expect(children[2].y).toBe(150)
+      expect(children[3].x).toBe(200)
+      expect(children[3].y).toBe(150)
+    })
+
+    test('fixed column widths', () => {
+      const graph = new SceneGraph()
+      const frame = gridFrame(graph, pageId(graph), [fixed(100), fixed(300)], [fr()])
+      rect(graph, frame.id, 50, 50)
+      rect(graph, frame.id, 50, 50)
+
+      computeLayout(graph, frame.id)
+
+      const children = graph.getChildren(frame.id)
+      expect(children[0].x).toBe(0)
+      expect(children[0].width).toBe(50)
+      expect(children[1].x).toBe(100)
+      expect(children[1].width).toBe(50)
+    })
+
+    test('mixed fr and fixed columns', () => {
+      const graph = new SceneGraph()
+      // 400px wide: 100px fixed + 300px remaining as 1fr
+      const frame = gridFrame(graph, pageId(graph), [fixed(100), fr()], [fr()])
+      rect(graph, frame.id, 50, 50)
+      rect(graph, frame.id, 50, 50)
+
+      computeLayout(graph, frame.id)
+
+      const children = graph.getChildren(frame.id)
+      expect(children[0].x).toBe(0)
+      expect(children[1].x).toBe(100)
+    })
+
+    test('unequal fr columns', () => {
+      const graph = new SceneGraph()
+      // 1fr + 2fr = 3fr total → 133.33px + 266.67px
+      const frame = gridFrame(
+        graph, pageId(graph),
+        [fr(1), fr(2)],
+        [fr()],
+        { width: 300, height: 100 },
+      )
+      rect(graph, frame.id, 50, 50)
+      rect(graph, frame.id, 50, 50)
+
+      computeLayout(graph, frame.id)
+
+      const children = graph.getChildren(frame.id)
+      expect(children[0].x).toBe(0)
+      expect(children[1].x).toBeCloseTo(100, 0)
+    })
+  })
+
+  describe('gaps', () => {
+    test('column gap', () => {
+      const graph = new SceneGraph()
+      const frame = gridFrame(
+        graph, pageId(graph),
+        [fr(), fr()],
+        [fr()],
+        { gridColumnGap: 20 },
+      )
+      rect(graph, frame.id, 50, 50)
+      rect(graph, frame.id, 50, 50)
+
+      computeLayout(graph, frame.id)
+
+      const children = graph.getChildren(frame.id)
+      // (400 - 20) / 2 = 190 per column
+      expect(children[0].x).toBe(0)
+      expect(children[1].x).toBe(210)
+    })
+
+    test('row gap', () => {
+      const graph = new SceneGraph()
+      const frame = gridFrame(
+        graph, pageId(graph),
+        [fr()],
+        [fr(), fr()],
+        { gridRowGap: 20, height: 200 },
+      )
+      rect(graph, frame.id, 50, 50)
+      rect(graph, frame.id, 50, 50)
+
+      computeLayout(graph, frame.id)
+
+      const children = graph.getChildren(frame.id)
+      expect(children[0].y).toBe(0)
+      // (200 - 20) / 2 = 90 per row
+      expect(children[1].y).toBe(110)
+    })
+
+    test('both column and row gaps', () => {
+      const graph = new SceneGraph()
+      const frame = gridFrame(
+        graph, pageId(graph),
+        [fr(), fr()],
+        [fr(), fr()],
+        { gridColumnGap: 10, gridRowGap: 10, width: 210, height: 210 },
+      )
+      for (let i = 0; i < 4; i++) rect(graph, frame.id, 30, 30)
+
+      computeLayout(graph, frame.id)
+
+      const children = graph.getChildren(frame.id)
+      // (210 - 10) / 2 = 100 per col, (210 - 10) / 2 = 100 per row
+      expect(children[0].x).toBe(0)
+      expect(children[0].y).toBe(0)
+      expect(children[1].x).toBe(110)
+      expect(children[1].y).toBe(0)
+      expect(children[2].x).toBe(0)
+      expect(children[2].y).toBe(110)
+      expect(children[3].x).toBe(110)
+      expect(children[3].y).toBe(110)
+    })
+  })
+
+  describe('padding', () => {
+    test('padding offsets grid content', () => {
+      const graph = new SceneGraph()
+      const frame = gridFrame(
+        graph, pageId(graph),
+        [fr()],
+        [fr()],
+        { paddingTop: 10, paddingLeft: 20, paddingRight: 30, paddingBottom: 40 },
+      )
+      rect(graph, frame.id, 50, 50)
+
+      computeLayout(graph, frame.id)
+
+      const child = graph.getChildren(frame.id)[0]
+      expect(child.x).toBe(20)
+      expect(child.y).toBe(10)
+    })
+  })
+
+  describe('explicit placement', () => {
+    test('gridPosition places child at specific cell', () => {
+      const graph = new SceneGraph()
+      const frame = gridFrame(graph, pageId(graph), [fr(), fr(), fr()], [fr(), fr()])
+      // Place in column 2, row 1 (0-indexed internally, but yoga uses 1-indexed)
+      rect(graph, frame.id, 50, 50, {
+        gridPosition: { column: 2, row: 1, columnSpan: 1, rowSpan: 1 },
+      })
+
+      computeLayout(graph, frame.id)
+
+      const child = graph.getChildren(frame.id)[0]
+      // Column 2 starts at 400/3 ≈ 133px
+      expect(child.x).toBeCloseTo(133, 0)
+      expect(child.y).toBe(0)
+    })
+
+    test('column span stretches across multiple columns', () => {
+      const graph = new SceneGraph()
+      const frame = gridFrame(
+        graph, pageId(graph),
+        [fr(), fr(), fr()],
+        [fr()],
+        { width: 300, height: 100 },
+      )
+      rect(graph, frame.id, 50, 50, {
+        gridPosition: { column: 1, row: 1, columnSpan: 2, rowSpan: 1 },
+      })
+
+      computeLayout(graph, frame.id)
+
+      const child = graph.getChildren(frame.id)[0]
+      expect(child.x).toBe(0)
+      // Child keeps its own 50px width since it's not set to fill
+      expect(child.width).toBe(50)
+    })
+
+    test('row span stretches across multiple rows', () => {
+      const graph = new SceneGraph()
+      const frame = gridFrame(
+        graph, pageId(graph),
+        [fr()],
+        [fr(), fr(), fr()],
+        { width: 100, height: 300 },
+      )
+      rect(graph, frame.id, 50, 50, {
+        gridPosition: { column: 1, row: 1, columnSpan: 1, rowSpan: 2 },
+      })
+
+      computeLayout(graph, frame.id)
+
+      const child = graph.getChildren(frame.id)[0]
+      expect(child.y).toBe(0)
+      expect(child.height).toBe(50)
+    })
+  })
+
+  describe('absolute children', () => {
+    test('absolute children are skipped in grid layout', () => {
+      const graph = new SceneGraph()
+      const frame = gridFrame(graph, pageId(graph), [fr(), fr()], [fr()])
+      rect(graph, frame.id, 50, 50)
+      rect(graph, frame.id, 50, 50, { layoutPositioning: 'ABSOLUTE', x: 300, y: 200 })
+      rect(graph, frame.id, 50, 50)
+
+      computeLayout(graph, frame.id)
+
+      const children = graph.getChildren(frame.id)
+      expect(children[0].x).toBe(0)
+      expect(children[1].x).toBe(300)
+      expect(children[1].y).toBe(200)
+      expect(children[2].x).toBe(200)
+    })
+  })
+
+  describe('hidden children', () => {
+    test('hidden children collapse in grid', () => {
+      const graph = new SceneGraph()
+      const frame = gridFrame(graph, pageId(graph), [fr(), fr()], [fr()])
+      rect(graph, frame.id, 50, 50, { visible: false })
+      rect(graph, frame.id, 50, 50)
+
+      computeLayout(graph, frame.id)
+
+      const children = graph.getChildren(frame.id)
+      expect(children[0].width).toBe(0)
+      expect(children[0].height).toBe(0)
+    })
+  })
+
+  describe('flex-to-grid switch', () => {
+    test('HUG frame expands to fit children in grid', () => {
+      const graph = new SceneGraph()
+      const page = pageId(graph)
+
+      const frame = autoFrame(graph, page, {
+        layoutMode: 'VERTICAL',
+        primaryAxisSizing: 'HUG',
+        counterAxisSizing: 'HUG',
+        width: 100,
+        height: 100,
+      })
+      rect(graph, frame.id, 80, 80)
+      rect(graph, frame.id, 80, 80)
+      rect(graph, frame.id, 80, 80)
+      rect(graph, frame.id, 80, 80)
+
+      computeLayout(graph, frame.id)
+      const hugNode = graph.getNode(frame.id)!
+      expect(hugNode.width).toBe(80)
+      expect(hugNode.height).toBe(320)
+
+      const children = graph.getChildren(frame.id)
+      const cols = Math.max(2, Math.ceil(Math.sqrt(children.length)))
+      const rows = Math.max(1, Math.ceil(children.length / cols))
+      const maxChildW = Math.max(...children.map((c) => c.width))
+      const maxChildH = Math.max(...children.map((c) => c.height))
+
+      graph.updateNode(frame.id, {
+        layoutMode: 'GRID',
+        primaryAxisSizing: 'FIXED',
+        counterAxisSizing: 'FIXED',
+        width: maxChildW * cols,
+        height: maxChildH * rows,
+        gridTemplateColumns: Array.from({ length: cols }, () => ({ sizing: 'FR' as const, value: 1 })),
+        gridTemplateRows: Array.from({ length: rows }, () => ({ sizing: 'FR' as const, value: 1 })),
+        gridColumnGap: 0,
+        gridRowGap: 0,
+      })
+
+      computeLayout(graph, frame.id)
+
+      const gridNode = graph.getNode(frame.id)!
+      expect(gridNode.width).toBe(160)
+      expect(gridNode.height).toBe(160)
+
+      const gridChildren = graph.getChildren(frame.id)
+      expect(gridChildren[0].x).toBe(0)
+      expect(gridChildren[0].y).toBe(0)
+      expect(gridChildren[1].x).toBe(80)
+      expect(gridChildren[1].y).toBe(0)
+      expect(gridChildren[2].x).toBe(0)
+      expect(gridChildren[2].y).toBe(80)
+      expect(gridChildren[3].x).toBe(80)
+      expect(gridChildren[3].y).toBe(80)
+    })
+  })
+
+  describe('computeAllLayouts with grid', () => {
+    test('grid frames are computed in bottom-up pass', () => {
+      const graph = new SceneGraph()
+      const page = pageId(graph)
+      const outer = autoFrame(graph, page, {
+        layoutMode: 'VERTICAL',
+        width: 400,
+        height: 600,
+        itemSpacing: 10,
+      })
+      const inner = gridFrame(graph, outer.id, [fr(), fr()], [fr()], {
+        width: 380,
+        height: 100,
+      })
+      rect(graph, inner.id, 50, 50)
+      rect(graph, inner.id, 50, 50)
+      rect(graph, outer.id, 100, 50)
+
+      computeAllLayouts(graph)
+
+      const innerChildren = graph.getChildren(inner.id)
+      expect(innerChildren[0].x).toBe(0)
+      expect(innerChildren[1].x).toBe(190)
+
+      const outerChildren = graph.getChildren(outer.id)
+      expect(outerChildren[0].y).toBe(0)
+      expect(outerChildren[1].y).toBe(110)
+    })
+  })
+})
diff --git a/tests/engine/tailwind-jsx.test.ts b/tests/engine/tailwind-jsx.test.ts
index 241570e98..ec9dbcc1f 100644
--- a/tests/engine/tailwind-jsx.test.ts
+++ b/tests/engine/tailwind-jsx.test.ts
@@ -509,4 +509,87 @@ describe('Tailwind JSX export', () => {
     expect(jsx).toContain('text-white')
     expect(jsx).not.toContain('#')
   })
+
+  test('grid layout → grid + grid-cols + grid-rows', () => {
+    const graph = makeGraph()
+    const frame = graph.createNode('FRAME', pageId(graph), {
+      name: 'Grid',
+      width: 400,
+      height: 300,
+      layoutMode: 'GRID',
+      gridTemplateColumns: [
+        { sizing: 'FR', value: 1 },
+        { sizing: 'FR', value: 1 },
+        { sizing: 'FR', value: 1 }
+      ],
+      gridTemplateRows: [
+        { sizing: 'FR', value: 1 },
+        { sizing: 'FR', value: 1 }
+      ],
+      gridColumnGap: 16,
+      gridRowGap: 8,
+      paddingTop: 12,
+      paddingRight: 12,
+      paddingBottom: 12,
+      paddingLeft: 12
+    })
+    const jsx = tw(graph, frame.id)
+    expect(jsx).toContain('grid ')
+    expect(jsx).toContain('grid-cols-3')
+    expect(jsx).toContain('grid-rows-2')
+    expect(jsx).toContain('gap-x-4')
+    expect(jsx).toContain('gap-y-2')
+    expect(jsx).toContain('p-3')
+    expect(jsx).not.toContain('flex')
+  })
+
+  test('grid with mixed tracks uses arbitrary value', () => {
+    const graph = makeGraph()
+    const frame = graph.createNode('FRAME', pageId(graph), {
+      width: 600,
+      height: 400,
+      layoutMode: 'GRID',
+      gridTemplateColumns: [
+        { sizing: 'FIXED', value: 200 },
+        { sizing: 'FR', value: 1 },
+        { sizing: 'AUTO', value: 0 }
+      ],
+      gridTemplateRows: [],
+      gridColumnGap: 0,
+      gridRowGap: 0
+    })
+    const jsx = tw(graph, frame.id)
+    expect(jsx).toContain('grid-cols-[200px_1fr_auto]')
+    expect(jsx).not.toContain('grid-rows')
+  })
+
+  test('grid child placement → col-start/row-start/col-span', () => {
+    const graph = makeGraph()
+    const frame = graph.createNode('FRAME', pageId(graph), {
+      width: 400,
+      height: 300,
+      layoutMode: 'GRID',
+      gridTemplateColumns: [
+        { sizing: 'FR', value: 1 },
+        { sizing: 'FR', value: 1 }
+      ],
+      gridTemplateRows: [
+        { sizing: 'FR', value: 1 },
+        { sizing: 'FR', value: 1 }
+      ],
+      gridColumnGap: 0,
+      gridRowGap: 0
+    })
+    const child = graph.createNode('RECTANGLE', frame.id, {
+      name: 'Span',
+      width: 100,
+      height: 50,
+      gridPosition: { column: 1, row: 2, columnSpan: 2, rowSpan: 1 }
+    })
+    const jsx = tw(graph, child.id)
+    expect(jsx).toContain('col-start-1')
+    expect(jsx).toContain('row-start-2')
+    expect(jsx).toContain('col-span-2')
+    expect(jsx).not.toContain('row-span')
+  })
 })