Understand page dimensions and the layout grid.
Page settings define the size of the page and the structure of the layout grid used to position Widgets. AG Studio pages are designed to respond to different viewport sizes. The page and its Widgets resize within the defined page boundaries while maintaining their relative positions on the layout grid.
These settings are defined as part of the page configuration. In the default setup, they are not edited through the Studio UI.
For the most predictable results, page dimensions and layout grid settings should be defined before Widgets are added.
Layout Grid Copy Link
After the page size is defined, the layout grid determines how that space is divided for Widget placement.
The layout grid is invisible but essential. It provides a consistent framework so Widgets line up neatly and behave predictably as they resize. Widget positions and sizes are defined against this grid rather than absolute screen coordinates.
Columns divide the page horizontally into sections. More Columns provide finer control when sizing and positioning Widgets. Fewer Columns use larger steps.
Row Height controls the vertical spacing unit in pixels. A smaller Row Height provides more precise vertical control, while a larger Row Height uses bigger steps.
As the Viewport changes size, Widgets keep their relative positions on the layout grid. Because Widgets align to this grid, sensible values should be chosen before building the page. This helps prevent Widgets from shifting unexpectedly later.
When a Widget is moved or resized:
- AG Studio shows a preview of where it will be placed
- Widgets automatically align to the grid (this is called snapping)
- If a Widget would go outside the page boundary, it stops at the edge (this is called clamping)
- When released, the Widget settles into the nearest available grid-aligned position within the page bounds
This automatic alignment helps keep Widgets neatly organised, even near the edges.
Try dragging the widget in the example below to see the grid lines and snapping behaviour in action.
Customisations Copy Link
Page settings also include universal styling options that apply across the page. At page level, the page background can be changed and default Widget styles can be defined.
Click on the page section in the Edit Panel to access page customisation options and see how styling changes take effect across the page.