A beautiful, interactive CSS Grid layout generator with drag-and-drop functionality
| Feature | Description |
|---|---|
| 🎯 Interactive Grid Builder | Click to add items, drag corners to resize instantly |
| 📋 One-Click Export | Copy generated HTML & CSS with a single click |
| 🌈 4 Unique Themes | Default, Cyber Grid, Fluid Mesh, and Classic Grid |
| 📐 Grid Presets | Start with pre-made layouts like Holy Grail, Dashboard, Gallery |
| 💫 Smooth Animations | GSAP-powered scroll animations and transitions |
| 📱 Responsive Design | Works beautifully on desktop and tablet |
| 🌙 Dark Mode | Modern dark theme with glowing accents |
| 📖 Documentation | Built-in docs with tips and keyboard shortcuts |
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/anupamraj176/GridLayoutGenrator.git
# Navigate to the project
cd GridLayoutGenrator
# Install dependencies
npm install
# Start the development server
npm run devOpen http://localhost:5173 to view it in your browser.
GridLayoutGenrator/
├── public/
│ ├── robots.txt # SEO robots file
│ └── sitemap.xml # SEO sitemap
├── src/
│ ├── components/
│ │ ├── grid/ # Grid generators
│ │ │ ├── GridGenerator.jsx
│ │ │ ├── CyberGridGenerator.jsx
│ │ │ ├── FluidMeshGenerator.jsx
│ │ │ └── ClassicGridGenerator.jsx
│ │ ├── home/
│ │ │ └── Hero.jsx # Landing page hero
│ │ └── layout/
│ │ ├── Navbar.jsx
│ │ ├── Footer.jsx
│ │ └── MainLayout.jsx
│ ├── pages/
│ │ ├── Home.jsx
│ │ ├── Presets.jsx # Grid presets gallery
│ │ └── Docs.jsx # Documentation page
│ ├── App.jsx
│ ├── main.jsx
│ └── index.css
├── index.html
├── package.json
├── vercel.json # Vercel deployment config
├── vite.config.js
├── tailwind.config.js
└── README.md
The default grid generator with an elegant indigo/purple theme.
A futuristic, neon-styled generator with purple/pink accents and glowing effects.
An organic, fluid-styled grid with calming blue tones.
A minimalist green-themed generator for clean, simple layouts.
Pre-made layouts available in the Presets page:
- Holy Grail - Classic header, footer, sidebar layout
- Dashboard - Admin dashboard with stat cards
- Magazine - Editorial style layout
- Gallery - Photo gallery masonry style
- Portfolio - Creative portfolio showcase
- Landing Page - Modern landing page sections
| Technology | Purpose |
|---|---|
| React 18 | UI Framework |
| Vite | Build Tool & Dev Server |
| GSAP | Animations & ScrollTrigger |
| React Router v6 | Client-side Routing |
| Tailwind CSS | Utility Styling |
- Push your code to GitHub
- Import project in Vercel
- Vercel will auto-detect Vite and configure build settings
- Click Deploy!
Or use Vercel CLI:
# Install Vercel CLI
npm i -g vercel
# Deploy
vercel# Create production build
npm run build
# Preview production build locally
npm run preview- Create Items - Click on any empty cell to add a grid item
- Resize - Drag the bottom-right corner handle to resize items
- Delete - Click the × button to remove an item
- Configure - Adjust columns, rows, and gap using the controls
- Export - Copy the generated HTML or CSS code
- Presets - Use pre-made layouts from the Presets page
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- GSAP for amazing animations
- Tailwind CSS for utility-first styling
- Vite for blazing fast development
- React Router for seamless navigation
Made with ❤️ by anupamraj176
⭐ Star this repo if you found it helpful!