From 2a73233a210a6e3ee302910e19ede329b721db4a Mon Sep 17 00:00:00 2001
From: Kiran Nambiar <14028003+sudopower@users.noreply.github.com>
Date: Sun, 29 Jun 2025 10:19:38 +0200
Subject: [PATCH 1/2] fix: css grid template setting must be dynamic

This will be populated based on board size
---
 snakeandladder-board/src/App.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/snakeandladder-board/src/App.css b/snakeandladder-board/src/App.css
index eb60137..08fb977 100644
--- a/snakeandladder-board/src/App.css
+++ b/snakeandladder-board/src/App.css
@@ -1,7 +1,6 @@
 
 .game-board{
   display: grid;
-  grid-template-columns: repeat(10, 1fr);
   width: max-content;
   margin: 5vh;
 }
@@ -28,4 +27,4 @@
   align-items: center;  
   display: flex;
   justify-content: center;
-}
\ No newline at end of file
+}

From 7ee4949ac18bd69605bd7407663d7931bb15f690 Mon Sep 17 00:00:00 2001
From: Kiran Nambiar <14028003+sudopower@users.noreply.github.com>
Date: Sun, 29 Jun 2025 10:23:34 +0200
Subject: [PATCH 2/2] feat: make grid dynamic

This makes css dynamic as per board size
---
 snakeandladder-board/src/App.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/snakeandladder-board/src/App.js b/snakeandladder-board/src/App.js
index 74e43b5..afb3017 100644
--- a/snakeandladder-board/src/App.js
+++ b/snakeandladder-board/src/App.js
@@ -27,7 +27,8 @@ function App() {
   console.log(data)
   return (
     <div className="App">
-      <div  className = 'game-board'>
+      <div  className = 'game-board' 
+        style={{gridTemplateColumns: `repeat(${boardSize}, 1fr)`}}>
       {data.map((item) => {
         return(
           <div className='game-cell'>{item}</div>