Layout System
Master the Group grid layout system for creating dynamic, responsive templates in Pluslide. Learn columns, rows, sizing modes, and nested layouts.
When elements in your template need to respond to each other based on dynamic data, you need Group. Group implements a powerful grid layout system similar to CSS Grid, enabling your templates to adapt gracefully to varying content.
Why Use Group?
The Problem with Fixed Positioning
Without Group, elements have fixed positions:
┌─────────────────────────────────────────────┐
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ Short Text │ │ Image │ │
│ │ (100px wide) │ │ (200px wide) │ │
│ └─────────────────┘ └─────────────────┘ │
│ │
│ What happens with longer text? │
│ ┌────────────────────────────┐───────────┐ │
│ │ This is a much longer text │ Image │ │
│ │ (180px wide) │ overlapped│ │
│ └────────────────────────────┘───────────┘ │
└─────────────────────────────────────────────┘Fixed positions cause overlapping when content varies.
The Group Solution
With Group, elements automatically adjust:
┌─────────────────────────────────────────────┐
│ ┌─────────────────────────────────────────┐ │
│ │ Group (Grid Container) │ │
│ │ ┌─────────────────┬───────────────────┐ │ │
│ │ │ Short Text │ Image │ │ │
│ │ │ (auto width) │ (flex: 1) │ │ │
│ │ └─────────────────┴───────────────────┘ │ │
│ └─────────────────────────────────────────┘ │
│ │
│ With longer text - adapts automatically: │
│ ┌─────────────────────────────────────────┐ │
│ │ ┌─────────────────────────┬───────────┐ │ │
│ │ │ This is a much longer │ Image │ │ │
│ │ │ text that fits properly │ (shrinks) │ │ │
│ │ └─────────────────────────┴───────────┘ │ │
│ └─────────────────────────────────────────┘ │
└─────────────────────────────────────────────┘When to Use Group
Use Group when:
- Elements need to sit side-by-side in a row
- Content length varies (names, descriptions, numbers)
- You want consistent spacing between elements
- You need card-like layouts with multiple parts
- Elements should share available space proportionally
Don't use Group when:
- You have a single, isolated element
- Positions are truly fixed and content never varies
- You need overlapping elements (like text over image)
Grid Fundamentals
Basic Structure
A Group defines a grid with rows and columns. In the Group editor (click Advanced button), you can configure:
Group Settings:
├── Columns Number of columns in the grid
├── Rows Number of rows in the grid
├── Gap Spacing between cells (in pixels)
├── Padding Internal padding (in pixels)
├── Column sizes Width setting for each column
└── Row sizes Height setting for each rowColumn and Row Sizes
In the Group editor, each row and column can be configured with one of three sizing modes:
| Option | Behavior | When to Use |
|---|---|---|
| Fill container | Takes equal share of remaining space (like CSS 1fr) | When columns/rows should split available space |
| Fixed | Always exactly the specified pixels | When you need precise dimensions |
| Hug content | Shrinks to fit the largest content in that track | When track should adapt to content |
Visual Examples
Equal columns (default - both set to "Fill container"):
┌─────────────────────────────────────┐
│ ┌───────────────┬───────────────┐ │
│ │ Fill container│ Fill container│ │
│ │ (50%) │ (50%) │ │
│ └───────────────┴───────────────┘ │
└─────────────────────────────────────┘Fixed + Fill container:
Column 1: Fixed (100px)
Column 2: Fill container
┌─────────────────────────────────────┐
│ ┌──────────┬────────────────────┐ │
│ │ 100px │ Fill container │ │
│ │ (fixed) │ (takes rest) │ │
│ └──────────┴────────────────────┘ │
└─────────────────────────────────────┘Hug content + Fill container:
Column 1: Hug content
Column 2: Fill container
┌─────────────────────────────────────┐
│ ┌──────┬────────────────────────┐ │
│ │ Hug │ Fill container │ │
│ │(fits)│ (takes rest) │ │
│ └──────┴────────────────────────┘ │
└─────────────────────────────────────┘Mixed sizing (Fixed + Hug content + Fill container):
Column 1: Fixed (80px)
Column 2: Hug content
Column 3: Fill container
┌─────────────────────────────────────┐
│ ┌────────┬──────┬───────────────┐ │
│ │ 80px │ Hug │Fill container │ │
│ │(fixed) │(fits)│ (remaining) │ │
│ └────────┴──────┴───────────────┘ │
└─────────────────────────────────────┘Placing Child Elements
Grid Position
In the Group editor, you can place child elements by dragging them into the desired grid cell. The editor shows a visual grid preview where you can:
- Drag elements to any cell in the grid
- Resize elements to span multiple cells
Basic Placement
Grid (2 cols × 2 rows):
Col 1 Col 2
┌─────────┬─────────┐
Row 1 │ Cell │ Cell │
├─────────┼─────────┤
Row 2 │ Cell │ Cell │
└─────────┴─────────┘
Drag elements from the "Add Element" dropdown into any cell.Spanning Multiple Cells
Resize an element to make it span across multiple columns or rows:
Header spanning 2 columns:
┌─────────┬─────────┐
Row 1 │ Header │ ← spans 2 columns
├─────────┼─────────┤
Row 2 │ Left │ Right │
└─────────┴─────────┘Image spanning 2 rows:
┌─────────┬─────────┐
Row 1 │ │ Top │
│ Image ├─────────┤ ← spans 2 rows
Row 2 │ │ Bottom │
└─────────┴─────────┘Common Layout Patterns
Pattern 1: Two-Column (Image + Text)
┌─────────────────────────────────────┐
│ ┌──────────────┬──────────────────┐ │
│ │ Image │ Title │ │
│ │ │ Description │ │
│ │ (fixed) │ (fill container) │ │
│ └──────────────┴──────────────────┘ │
└─────────────────────────────────────┘
Configuration:
- Columns: 2, Rows: 1
- Column 1: Fixed (120px)
- Column 2: Fill containerPattern 2: Card with Header and Body
┌─────────────────────────────────────┐
│ ┌─────────────────────────────────┐ │
│ │ Header │ │
│ ├─────────────────────────────────┤ │
│ │ │ │
│ │ Body │ │
│ │ │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘
Configuration:
- Columns: 1, Rows: 2
- Row 1: Hug content (header fits its text)
- Row 2: Fill container (body takes remaining space)Pattern 3: Three-Column Comparison
┌─────────────────────────────────────────────┐
│ ┌───────────┬───────────┬───────────┐ │
│ │ Basic │ Pro │Enterprise │ │
│ │ $9/mo │ $29/mo │ $99/mo │ │
│ │ │ │ │ │
│ │ • 5GB │ • 50GB │ • 500GB │ │
│ │ • Email │ • Phone │ • 24/7 │ │
│ └───────────┴───────────┴───────────┘ │
└─────────────────────────────────────────────┘
Configuration:
- Columns: 3, Rows: 1
- All columns: Fill container (equal thirds)
- Gap: 16pxPattern 4: Sidebar Layout
┌─────────────────────────────────────────────┐
│ ┌─────────┬───────────────────────────────┐ │
│ │ │ │ │
│ │ Sidebar │ Main Content │ │
│ │ (fixed) │ (fill container) │ │
│ │ │ │ │
│ └─────────┴───────────────────────────────┘ │
└─────────────────────────────────────────────┘
Configuration:
- Columns: 2, Rows: 1
- Column 1: Fixed (200px)
- Column 2: Fill containerPattern 5: Icon + Label Row
┌─────────────────────────────────────┐
│ ┌──────┬────────────────────────┐ │
│ │ Icon │ Feature description... │ │
│ │ hug │ takes remaining width │ │
│ └──────┴────────────────────────┘ │
└─────────────────────────────────────┘
Configuration:
- Columns: 2, Rows: 1
- Column 1: Hug content (icon fits)
- Column 2: Fill container (text fills)Interactive Grid Playground
To understand how grid sizing works, try this CSS Grid Playground:
The concepts are similar:
1frin CSS Grid = Fill container in Pluslideautoin CSS Grid = Hug content in Pluslide100pxin CSS Grid = Fixed (100px) in Pluslide
Nesting Groups
Groups can contain other Groups for complex layouts:
┌─────────────────────────────────────────────┐
│ Outer Group (1 col × 2 rows) │
│ ┌─────────────────────────────────────────┐ │
│ │ Header │ │
│ ├─────────────────────────────────────────┤ │
│ │ Inner Group (3 cols × 1 row) │ │
│ │ ┌───────────┬───────────┬───────────┐ │ │
│ │ │ Card 1 │ Card 2 │ Card 3 │ │ │
│ │ └───────────┴───────────┴───────────┘ │ │
│ └─────────────────────────────────────────┘ │
└─────────────────────────────────────────────┘Best Practices
For tips on creating effective and maintainable grid layouts, see Layout Tips.
Template Overview
Learn to design effective templates in Pluslide. Understand core concepts like fields, layout systems, and API-driven data binding for dynamic presentations.
Field Configuration
Configure field properties in Pluslide templates, including sizing modes, alignment options, and API behavior settings like Static and Required flags.