###Proposal: Add Grid Frame Layout to Prismic’s SliceZone
Current Challenge
Prismic’s SliceZone currently stacks slices vertically, which limits layout options for more complex and modern designs. Many websites today require flexible, modular layouts, like grids, to create visually engaging pages.
Solution: Grid Frame Layout Option
Adding a Grid Frame layout to SliceZone would enable users to arrange slices in customizable rows and columns directly within Prismic. This could be set up through:
Prismic UI Options – allowing users to define grid columns, rows, and responsive settings.
JSON Configurations – for developers to control layout details programmatically.
Benefits
Greater Design Flexibility: Easily create grid-based layouts for more dynamic pages.
Simplified Code: Reduces the need for custom front-end layout logic.
Responsive Ready: Optimizes layouts for all screen sizes.
This feature would make Prismic more powerful for modern websites, providing users with the layout flexibility they need.
I'm not sure I understand what you mean. Do you mean you'd like to be able to use slices kind of like building blocks, where organising them around in the slice zone would also move them around on the actual websites?
I means, in a project I need make all slice that import from document on dashboard to a grid layout but not remove slicezone tag (cuz slice zone has render like stack; means render like block and block and not nested slice). I dont need render slice block by block, i need more detail of slice component to render from a type layout (like a layout grid 3 that make slice component like search input has 2 col and button search is 1 col).
The Prismic UI isn't intended to directly reflect what the actual website layout looks like. You mentioned the need for custom front-end layout logic: that's exactly what we strive for. We want developers to have complete freedom over how they choose to display their slices. This means not having any preset layout in the slice zone: the rendering like "stack" that you pointed out isn't linked to the actual display of the components, it's just the way we present it to the user.
If you want to display a project in a grid like in your example:
Each red piece would be its own slice (the top one with a repeatable group inside), and the blue pieces can be separate Slices in a new tab in Slice Zone for example. That way they can be rendered outside the original main content column:
Once you have those, you can control in your code where exactly they get displayed with CSS (using grid, float, flex, or whatever you're most comfortable with), make them responsive, and as flexible as you wish.
