Document components spacing

README.md

@@ -9,3 +9,51 @@ This app is built using Appsmith. Turn any datasource into an internal app in mi
 ##### You can visit the application using the below link
 
 ###### [![](https://assets.appsmith.com/git-sync/Buttons.svg) ](https://appsmith.mpeapp.com/applications/6947cc068872ae1d129983a0/pages/6947cc068872ae1d129983a3) [![](https://assets.appsmith.com/git-sync/Buttons2.svg)](https://appsmith.mpeapp.com/applications/6947cc068872ae1d129983a0/pages/6947cc068872ae1d129983a3/edit)
+
+---
+
+## Widget Positioning & Spacing
+
+Appsmith uses a **grid-based layout system** for widget positioning.
+
+### Grid Basics
+
+| Property | Description | Default |
+|----------|-------------|---------|
+| `topRow` | Starting row position (0-based) | - |
+| `bottomRow` | Ending row position | - |
+| `leftColumn` | Starting column (0-based) | - |
+| `rightColumn` | Ending column | - |
+| `parentRowSpace` | Pixels per row | 10px |
+| `parentColumnSpace` | Pixels per column | ~25px |
+
+The canvas is **64 columns wide**. Each row is **10 pixels tall**.
+
+### Calculating Size
+
+```
+Height = (bottomRow - topRow) × 10px
+Width  = (rightColumn - leftColumn) × 25px
+```
+
+### Visual Example
+
+```
+Row 0  ┌────────────────────────────────────────┐
+       │     Navigation (topRow: 0)             │
+Row 7  └────────────────────────────────────────┘  ← bottomRow: 7
+Row 8  ┌────────────────────────────────────────┐  ← topRow: 8 (1 row gap = 10px)
+       │     Content Widget                     │
+Row 16 └────────────────────────────────────────┘
+```
+
+### This Project's Standard
+
+| Widget | topRow | bottomRow | Notes |
+|--------|--------|-----------|-------|
+| Navigation | 0 | 7 | 70px tall |
+| First Content | 8 | 16 | 10px gap below nav |
+
+### Dynamic Height
+
+Widgets with `"dynamicHeight": "AUTO_HEIGHT"` adjust height based on content. The `bottomRow` serves as an initial guide, and `originalTopRow`/`originalBottomRow` store the original placement values.