handle missing template row/column to the grid

Author: imrishabh18

lib/CssGrid/CssGrid_layout.ts

@@ -434,8 +434,36 @@ export const CssGrid_layout = (
     if (cell.column + cell.columnSpan > maxCol)
       maxCol = cell.column + cell.columnSpan
   }
-  while (rowSizes.length < maxRow) rowSizes.push(0)
-  while (columnSizes.length < maxCol) columnSizes.push(0)
+  
+  // Handle implicit row sizing when no gridTemplateRows is specified
+  if (rowSizes.length === 0 && maxRow > 0 && opts.containerHeight) {
+    // If no explicit rows but we have content and a container height,
+    // distribute the height equally among the implicit rows
+    const implicitRowCount = maxRow
+    const availableHeight = opts.containerHeight - rowGap * (implicitRowCount - 1)
+    const implicitRowHeight = availableHeight / implicitRowCount
+    for (let i = 0; i < implicitRowCount; i++) {
+      rowSizes.push(implicitRowHeight)
+    }
+  } else {
+    // Default behavior: add zero-height rows
+    while (rowSizes.length < maxRow) rowSizes.push(0)
+  }
+  
+  // Handle implicit column sizing when no gridTemplateColumns is specified
+  if (columnSizes.length === 0 && maxCol > 0 && opts.containerWidth) {
+    // If no explicit columns but we have content and a container width,
+    // distribute the width equally among the implicit columns
+    const implicitColCount = maxCol
+    const availableWidth = opts.containerWidth - columnGap * (implicitColCount - 1)
+    const implicitColWidth = availableWidth / implicitColCount
+    for (let i = 0; i < implicitColCount; i++) {
+      columnSizes.push(implicitColWidth)
+    }
+  } else {
+    // Default behavior: add zero-width columns
+    while (columnSizes.length < maxCol) columnSizes.push(0)
+  }
 
   // --- 6. Calculate exact coordinates for each cell ---
 

site/level18.page.tsx

@@ -0,0 +1,6 @@
+import level18 from "testcases/level18"
+import { LevelDisplay } from "./LevelDisplay"
+
+export default () => {
+  return <LevelDisplay level={level18} />
+}

testcases/level18.browser-result.json

@@ -0,0 +1,8 @@
+{
+  "water": {
+    "x": 40,
+    "y": 0,
+    "width": 20,
+    "height": 100
+  }
+}

testcases/level18.ts

@@ -0,0 +1,8 @@
+import type { CssGridOptions } from "lib/types"
+
+export default {
+  children: [{ key: "water", columnStart: 3 }],
+  containerWidth: 100,
+  containerHeight: 100,
+  gridTemplateColumns: "20% 20% 20% 20% 20%",
+} satisfies CssGridOptions

tests/__snapshots__/level18.snap.svg

@@ -0,0 +1,72 @@
+import { expect, test } from "bun:test"
+import level18 from "testcases/level18"
+import browserResult from "testcases/level18.browser-result.json"
+import { testGrid } from "./fixtures/testGrid"
+
+test("level18", () => {
+  const { laidOutResult, outputViz, layout } = testGrid(level18, browserResult)
+
+  expect(browserResult).toMatchInlineSnapshot(`
+    {
+      "water": {
+        "height": 100,
+        "width": 20,
+        "x": 40,
+        "y": 0,
+      },
+    }
+  `)
+  expect(laidOutResult).toMatchInlineSnapshot(`
+    {
+      "water": {
+        "height": 100,
+        "width": 20,
+        "x": 40,
+        "y": 0,
+      },
+    }
+  `)
+
+  expect(layout).toMatchInlineSnapshot(`
+    {
+      "cells": [
+        {
+          "column": 2,
+          "columnSpan": 1,
+          "height": 100,
+          "key": "water",
+          "row": 0,
+          "rowSpan": 1,
+          "width": 20,
+          "x": 40,
+          "y": 0,
+        },
+      ],
+      "columnGap": 0,
+      "columnSizes": [
+        20,
+        20,
+        20,
+        20,
+        20,
+      ],
+      "itemCoordinates": {
+        "water": {
+          "height": 100,
+          "width": 20,
+          "x": 40,
+          "y": 0,
+        },
+      },
+      "rowGap": 0,
+      "rowSizes": [
+        100,
+      ],
+    }
+  `)
+  expect(outputViz).toMatchSvgSnapshot(import.meta.path)
+
+  if (!process.env.BUN_UPDATE_SNAPSHOTS) {
+    expect(laidOutResult).toEqual(browserResult)
+  }
+})