Grid Panel
Use Grid Panels for two-dimensional layouts where rows and columns guide the flow.
Add a Grid Panel from the left sidebar. Children flow through the grid in order. Dragging or moving children changes their place in that flow.
Common Properties
Most blocks share a core set of properties. The right sidebar shows the properties available for the current selection, including controls added by the parent panel.
Size Control how much space the block takes up
Controls the block's horizontal space. Use a fixed value for a predictable footprint, `%` when the width should respond to the canvas or parent panel, or auto sizing when content or layout should decide the width.
Controls the block's vertical space. Height can be fixed, flexible, or constrained with minimum and maximum values when a block needs room to grow without getting too large or too small.
Keeps width and height connected so a block can scale without stretching. This is useful for images, shapes, and blocks that need to preserve a specific proportion.
Auto size to grid cell
Blocks inside a Grid Panel can use Auto size to grid cell. When enabled, the child sizes to the grid area it receives. Turn it off when the child should keep its own width or height.
Arrange Place and manage the block in its layout
Set the block's position on the canvas or inside a Free Panel. X controls horizontal placement; Y controls vertical placement. Positions can use fixed units or `%` values with anchors.
Move a block to common canvas positions, or use anchors to decide how the block lines up to a percent-based X or Y value.
Rotate the block or flip it horizontally or vertically without changing the block's content.
Lock a block to avoid accidental edits, or move it forward and backward when blocks overlap.
Background Style the surface behind the block’s content
Assign a single color as the background of the block.
- Color
Use a linear, radial, or conic gradient. Gradients are built from stops, and each stop has a color and a position. Stops are ordered by position, so moving a stop changes how the colors blend across the block.
- Stop colors
- Stop positions
Choose a pattern, then customize the colors it exposes. Some patterns also include a size control. Different patterns use different numbers of colors, so the available controls change after you choose a pattern.
- Pattern colors
- Pattern size
Canvas backgrounds
Canvas and block backgrounds are separate. A transparent block can show the canvas background or the parent panel behind it.
Border Define the block’s edge and corners
Border controls are split into simple and advanced modes.
Use simple border controls when the same color, thickness, line style, and corner radius should apply everywhere.
Open Advanced Border to edit sides and corners separately. Sides can have their own color, thickness, and line style. Corners can have their own radius.
Shadow Layer shadows to add depth to your blocks
Shadows can be layered. Use a regular shadow for depth, an inner shadow for inset effects, or a glow when the shadow should spread evenly around the block.
Block Specific Properties
Padding Space between the panel edge and its children
Padding creates space inside the block’s edge before content is laid out.
Use one value when every side should have the same inset.
Open Advanced Padding to set top, right, bottom, and left independently.
Panel spacing
Panel padding is separate from gap and child margin. Padding creates space inside the panel edge; gap and child margin control spacing between child blocks.
Columns Number and sizing of columns
Unlike a Table Panel, Grid Panel children are not assigned to specific cells. They flow in order through the available grid space.
Child Properties
When a block is inside a Grid Panel, extra properties become available for how that block sits inside the panel and relates to the other children. Select the child block to edit these properties.
Grid Tracks
Grid and Table Panels are built from tracks: columns and rows. Tracks can have their own size and background.
Hover a column or row on the canvas and click its track selector to edit that track. The right sidebar switches to the selected column or row and shows track-specific controls.
Use track size to control how much space a row or column receives inside the panel.
- Defined uses a value with
fr,%, orpxunits. - Auto lets the track size itself from its contents.
- Min Content sizes the track to the smallest content-based size it can use.
- Max Content sizes the track around its largest content-based size.
Track backgrounds apply to the selected row or column. Use them for bands, separators, highlighted columns, or table-like layouts.
See the Advanced Panels guide for help choosing and combining panel types.
Templated Content
Many properties can use Variables to assign their value when each image is created.
Variables can be required, ignored, or given a fallback value. When you render the template, pass values with template_values.