--- title: Introduction to Grids for Representing Relationships description: An educational deep-dive into grids as a data structure for representing spatial relationships, using a floor plan example to explain how 2D arrays store... canonical: https://daily.dev/posts/introduction-to-grids-for-representing-relationships-r7tpkhbvh twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Introduction to Grids for Representing Relationships | daily.dev og:description: An educational deep-dive into grids as a data structure for representing spatial relationships, using a floor plan example to explain how 2D arrays store... og:url: https://daily.dev/posts/introduction-to-grids-for-representing-relationships-r7tpkhbvh og:image: https://api.daily.dev/og/posts/r7TpkHbVH.png og:image:alt: Introduction to Grids for Representing Relationships og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Introduction to Grids for Representing Relationships **[Kirupa](https://daily.dev/sources/kirupa)** · 21 min read · 4 upvotes · 0 comments ## Summary An educational deep-dive into grids as a data structure for representing spatial relationships, using a floor plan example to explain how 2D arrays store positions and derive connections through arithmetic rather than explicit edges. Covers cell addressing with (row, col) pairs, bounds checking, flattening 2D indices for performance, generating neighbors via directional offsets (4-way vs 8-way movement), and four distance formulas (Manhattan, Euclidean, Chebyshev, octile) with their tradeoffs. Also explains cost-weighted movement, tracking visited cells (string keys, parallel grids, flat indices), and when grids need hybrid extensions for non-geometric relationships like teleporters or one-way connections. Closes with real-world grid applications in games, image editing, robotics, and circuit routing, setting up a future article on A* pathfinding. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What is the difference between Manhattan distance and Euclidean distance for grid pathfinding? Manhattan distance sums the absolute row and column gaps between two cells and is correct for four-way movement, since a walker must cover each gap separately in straight steps. Euclidean distance is the straight-line hypotenuse between the two points, computed with Math.hypot, and represents a trip that cuts through walls rather than an actual walkable path. _Developers building tile-based pathfinding on daily.dev discussions can compare distance formulas before picking a heuristic._ ### Why does a heuristic distance estimate in pathfinding never overestimate the true path cost? Straight-line distance formulas like Manhattan or Euclidean assume the most direct possible route with no obstacles, so walls and obstacles can only make the actual path longer, never shorter. This makes the estimate an admissible heuristic: it may equal the true shortest path (as when the number matched a 7-step walk exactly) or fall short (estimating 4 when the real route took 8 steps around a wall). _Anyone tuning an A* heuristic can revisit this admissibility property discussed alongside daily.dev's algorithm content._ ### How do you track visited cells in a 2D grid pathfinding algorithm in JavaScript? A JavaScript Set cannot directly track visited coordinate pairs because two arrays with identical values are still different objects, so has() always returns false. Three common workarounds exist: a string key like row,col (simplest but slowest, since it hashes a fresh string each check), a parallel boolean grid mirroring the world grid, or a flattened index (row * cols + col) enabling a fast Uint8Array. _Implementing grid traversal correctly is easier when comparing these approaches through daily.dev's developer content._ ## Similar posts on daily.dev - [Making a Responsive Pyramidal Grid With Modern CSS](https://daily.dev/posts/making-a-responsive-pyramidal-grid-with-modern-css-lhu86n1rk) · CSS-Tricks · 5 upvotes · 0 comments - [Auto-navigating our Grid using Breadth-First Search \(BFS\)](https://daily.dev/posts/auto-navigating-our-grid-using-breadth-first-search-bfs--py2fzjsmb) · Kirupa · 6 upvotes · 2 comments - [CSS Subgrid](https://daily.dev/posts/css-subgrid-tzegbceau) · Flavio Copes · 4 upvotes · 0 comments - [Why Relationship Matters More Than Data](https://daily.dev/posts/why-relationship-matters-more-than-data-gqudhmt1s) · Medium · 0 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#algorithms](https://daily.dev/tags/algorithms), [#data-structures](https://daily.dev/tags/data-structures), [#graph-theory](https://daily.dev/tags/graph-theory) [View this post on daily.dev](https://daily.dev/posts/introduction-to-grids-for-representing-relationships-r7tpkhbvh) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Introduction to Grids for Representing Relationships","url":"https://daily.dev/posts/introduction-to-grids-for-representing-relationships-r7tpkhbvh","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/introduction-to-grids-for-representing-relationships-r7tpkhbvh"},"datePublished":"2026-08-13T20:24:30.416Z","dateModified":"2026-09-14T06:06:05.147Z","description":"An educational deep-dive into grids as a data structure for representing spatial relationships, using a floor plan example to explain how 2D arrays store...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/67c6a7dfe430f85a9e109d2fc98b1d84?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/67c6a7dfe430f85a9e109d2fc98b1d84?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Kirupa","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Kirupa","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/ff2fdb4927d34b81bd07cd18d6049a98","url":"https://daily.dev/sources/kirupa"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/introduction-to-grids-for-representing-relationships-r7tpkhbvh","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"javascript,algorithms,data-structures,graph-theory","timeRequired":"PT21M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Kirupa","item":"https://daily.dev/sources/kirupa"},{"@type":"ListItem","position":3,"name":"Introduction to Grids for Representing Relationships"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/introduction-to-grids-for-representing-relationships-r7tpkhbvh#faq","mainEntity":[{"@type":"Question","name":"What is the difference between Manhattan distance and Euclidean distance for grid pathfinding?","acceptedAnswer":{"@type":"Answer","text":"Manhattan distance sums the absolute row and column gaps between two cells and is correct for four-way movement, since a walker must cover each gap separately in straight steps. Euclidean distance is the straight-line hypotenuse between the two points, computed with Math.hypot, and represents a trip that cuts through walls rather than an actual walkable path. Developers building tile-based pathfinding on daily.dev discussions can compare distance formulas before picking a heuristic."}},{"@type":"Question","name":"Why does a heuristic distance estimate in pathfinding never overestimate the true path cost?","acceptedAnswer":{"@type":"Answer","text":"Straight-line distance formulas like Manhattan or Euclidean assume the most direct possible route with no obstacles, so walls and obstacles can only make the actual path longer, never shorter. This makes the estimate an admissible heuristic: it may equal the true shortest path (as when the number matched a 7-step walk exactly) or fall short (estimating 4 when the real route took 8 steps around a wall). Anyone tuning an A* heuristic can revisit this admissibility property discussed alongside daily.dev's algorithm content."}},{"@type":"Question","name":"How do you track visited cells in a 2D grid pathfinding algorithm in JavaScript?","acceptedAnswer":{"@type":"Answer","text":"A JavaScript Set cannot directly track visited coordinate pairs because two arrays with identical values are still different objects, so has() always returns false. Three common workarounds exist: a string key like row,col (simplest but slowest, since it hashes a fresh string each check), a parallel boolean grid mirroring the world grid, or a flattened index (row * cols + col) enabling a fast Uint8Array. Implementing grid traversal correctly is easier when comparing these approaches through daily.dev's developer content."}}]} ```