Grid Mode Plugin – The Power of CSS Grid, Now Visual
CSS Grid is one of the most powerful layout systems in modern web development—but up until now, working with it has meant writing complex code or relying on trial-and-error in the browser. With the Grid Mode Plugin, that changes. Its available in both our OS version of Grapes, and our Studio SDK.
We’ve taken the flexibility of CSS Grid and made it visual, intuitive, and interactive—so you can design sophisticated layouts right on the canvas without touching a line of CSS.
Why Grid?
CSS Grid gives you the ability to create two-dimensional layouts—both rows and columns—with precise control over spacing, alignment, and responsiveness. Whether you're building marketing pages, dashboards, or editorial layouts, Grid helps structure content in ways that Flexbox alone can’t.
But while Grid is powerful, it hasn’t always been accessible to non-developers. That’s where Grid Mode comes in.
Drag, Drop, and Design – No Code Required
With Grid Mode enabled, any element with display: grid becomes a visually editable container. Inside the editor, you can:
- Drag and resize grid items directly on the canvas
- Adjust gaps, alignment, and templates from the Style Manager
- Define and modify grid areas without diving into dev tools
- Quickly preview changes across breakpoints and screen sizes
It’s a fast, friendly way to build even the most intricate designs.
A Better Workflow for Teams
Grid Mode bridges the gap between designers and developers:
- Designers can take control of layout without writing code
- Developers can trust that the underlying CSS stays clean
- Product teams can iterate faster, with fewer back-and-forths
Combined with other Studio SDK plugins—like accordion, or our rich text editor options—you can build and manage complete websites or apps with professional-grade layout tools. While best used within our Studio SDK, this plugin can be used in both our open source version of GrapesJS or Grapes SDK, all that's required is a license key.
Why Use Grid Mode?
- 💡 Design complex layouts visually with full CSS Grid support
- 🎯 Edit grid settings directly in the Style Manager
- 🔄 Import existing HTML/CSS and start editing immediately
- 🚀 Empower your team to build and iterate faster
Whether you’re crafting a responsive landing page or fine-tuning a content-heavy interface, Grid Mode lets you design with precision—without the code.
Try Grid Mode Now and experience the difference.