Project Setup
- Initialize a new Next.js project.
Grid Layout
- Create a grid with 10 columns.
- Rows should expand dynamically based on content.
Grid Items (Boxes)
- Render boxes inside the grid.
- Each box should be resizable in both width and height.
Selection & Positioning
- A box can be selected by the user.
- When selected, the box should be rendered in absolute positioning, keeping its exact location.
- On deselect, the system should calculate the correct grid cell and offset, then re-render the box aligned to the grid.
Expected Behavior
- Unselected → box snaps into the grid.
- Selected → box moves freely and can be resized.
Implementation Notes
- You may use third-party libraries for dragging/resizing if necessary.
- Preferred: implement functionality without heavy external libraries.
Goal
Build a grid system where items can be freely positioned and resized when selected, but snap back into the grid layout when unselected.
Submission
- Provide a link to a public GitHub repository containing your Next.js project.
- Deploy to Vercel / Netlify / Cloudflare Pages.
- Ensure your code is well-organized and commented where necessary.
Submission
Once you've completed the task, email your GitHub repository link and the deployed live link to: