The Fixed Grid element is an alternative layout element that arranges content in a structured grid with defined columns and rows. It's perfect for displaying product grids, image galleries, card layouts, and similar organized content.
Overview
Unlike the flexible Grid element, the Fixed Grid provides precise control over column and row structure, making it ideal for consistent, repeating layouts.
Common Use Cases
Use Case | Description |
Product grids | Display product cards in organized rows |
Image galleries | Arrange images in uniform columns |
Feature cards | Showcase features or services |
Team sections | Display team member cards |
Portfolio layouts | Present work samples consistently |
Inserting the Fixed Grid Element
Steps
Open the Insert panel
Hover over Grid
Select Fixed Grid
Drag onto your canvas
Default Configuration
When dropped onto the canvas, the Fixed Grid displays:
Default | Value |
Columns | 3 |
Rows | 2 |
Configuring the Fixed Grid
With the Fixed Grid selected, the right sidebar displays configuration options.
Size
Define the dimensions of the grid, the same as all other layout elements (Fixed, Relative, Fit, Fill, View).
Spacing
Control the spacing around and inside the grid element.
Layout
The Layout section is key for configuring your Fixed Grid:
Setting | Description |
Columns | Number of columns in the grid |
Column Gap | Space between columns |
Row Gap | Space between rows |
Linked Gap | Set column and row gap together or individually |
Style
Customize the appearance of the grid:
Property | Description |
Fill | Background color |
Border | Border style and color |
Border Radius | Corner rounding |
Rotation | Rotate the grid |
Shadow | Drop shadow effects |
Opacity | Transparency level |
Element Sizing Within the Grid
When you place an element (like a product card) inside the Fixed Grid, you can control how much space it occupies.
Column Span and Row Span
With an element selected inside the grid, under Size you'll see:
Setting | Description |
Column Span | How many columns the element spans |
Row Span | How many rows the element spans |
Default Behavior
By default, elements are set to span 1 column and 1 row.
Example
Grid Setup | Element Behavior |
3 columns, element span = 1 | 3 elements fit in one row |
3 columns, element span = 2 | Element takes 2 columns, 1 element + partial fit |
3 columns, element span = 3 | Element spans full width |
Responsive Design
The Fixed Grid is fully responsive. You can set different values for each viewport.
What You Can Customize Per Viewport
Setting | Responsive |
Number of columns | ✓ |
Column gap | ✓ |
Row gap | ✓ |
Element column span | ✓ |
Element row span | ✓ |
Example Responsive Setup
Viewport | Columns | Element Span |
Desktop | 4 | 1 |
Tablet | 2 | 1 |
Mobile | 1 | 1 |
Quick Reference
Task | Action |
Insert Fixed Grid | Insert panel → Grid → Fixed Grid |
Set columns | Select grid → Layout → Columns |
Set gap | Select grid → Layout → Column/Row Gap |
Set element span | Select element → Size → Column/Row Span |
Adjust per viewport | Switch viewport → Modify settings |
Fixed Grid vs Regular Grid
Feature | Fixed Grid | Regular Grid |
Column control | Defined columns | Free placement |
Row control | Defined rows | Auto-generated |
Element positioning | Column/row span | Free drag |
Best for | Uniform layouts | Creative layouts |