Skip to main content
The Grid Layout block is a layout block in the Live Page Builder that arranges other blocks into rows and columns. Drag blocks into grid cells, resize and reposition them directly on the canvas, and define how the layout adapts across screen sizes — all without writing any CSS.

​
What You Can Do

  • Configure rows and columns — set up the grid structure your layout needs
  • Style grid items — control alignment such as centering, plus other per-item styles
  • Resize on the canvas — use the inline grid item resizer to adjust cells directly in the preview
  • Place items precisely — use the grid placement input in the styles panel to position a block in the grid
  • Move and swap freely — insert, move, and swap blocks both within a grid and between separate grids
  • Responsive placement — define how grid items are placed at different breakpoints so your layout looks right on desktop, tablet, and mobile

​
Use Cases

  • Multi-column sections — feature cards, stat tiles, or comparison layouts side by side
  • Structured pages — combine grids with other blocks to build rich, organized page sections
  • Responsive reflow — present content in columns on desktop that stack cleanly on mobile
Combine the Grid block with conditional blocks to show or hide entire grid items based on a user’s data.

​
Next Steps

Live Page Builder

Back to the visual builder overview

Conditional Blocks

Show or hide blocks with if/else logic