Hello Product Hunt community! I'm thrilled to finally share my latest side project, MakeItGrid—a platform I’ve been working hard to develop for creating and customizing bento grids. Over the past few weeks, I’ve been brainstorming a solution to simplify grid design for developers and designers. I noticed that while bento grids are trending, many struggle with creating responsive designs (myself included 😅). That’s why I created MakeItGrid, a tool designed to make grid layout creation easy and efficient. Here’s the tech stack behind it: Next.js 14 for the frontend TypeScript for programming Tailwind CSS for styling Shadcn UI for components Vercel for hosting Here are some of the key features of the tool: 🖌️ Flexible Layouts: Create grid layouts with your choice of columns, rows, and gaps. 📱 Responsive Design: Seamlessly organize your grid layout for both mobile and desktop devices. 🎲 Random Grid Generator: Generate random layouts to experiment with and discover new designs. 📄 Code Export: Build your layout and copy the responsive code in two formats: Tailwind CSS and CSS Grid. 🔗 CodeSandbox Integration: Test the generated code directly in CodeSandbox to see how it performs. 🌗 Dark and Light Modes: Switch between dark and light modes for a comfortable user experience. 🌐 Cross-Device Compatibility: Use the tool from any device! 🚀 Quick Tour: Includes a quick guide to help you understand how the platform works, with a "Quick Tour" button. 🔎 SEO and Performance Optimization: The project is SEO-friendly and efficient, validated with high scores on PageSpeed Insights. 🖼️ Customizable Items: Personalize each grid item by adding and customizing images to make your grid truly unique. 📸 Download Grid as Image: Capture and download your entire grid layout as an image for easy sharing and integration into other projects. Oh, and did I mention that this tool is open-source? If you’re interested in how it works or want to contribute, feel free to dive in. I’d love to hear your feedback and suggestions 👏🏼 I’m still learning and growing, and I hope you find it useful. Thanks! ❤️ #MakeItGrid #WebDevelopment #FrontendDevelopment #BentoGridGenerator #NextJS #OpenSource #ShadcnUI #SEO #Innovation #DeveloperTools

MakeItGrid

Bento Grid Generator

Bento Grid Generator