Page layout and content
How sections, rows, and columns control page width and spacing on ArtInStack—and when to use row max-width instead of padding or Style tab width.
Most pages follow one structure: Section → Row → Column(s) → Block(s). Understanding which layer controls width versus spacing keeps layouts centered on desktop and comfortable on mobile.
Sidebar basics: Page editor sidebar and toolbar. Block catalog: Editor blocks and layout reference.
The photo-frame model
Think of each section as a full-width photo frame. The row inside it is the mat board—a centered box with a maximum width. Your blocks live inside that box.
┌─ SECTION (100% width — background, vertical breathing room) ────┐
│ │
│ ┌─ ROW (max-width, centered — main content boundary) ─────┐ │
│ │ [ Portfolio grid / text / buttons / other blocks ] │ │
│ └─────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
Do not use large left/right padding on the section to “squeeze” content narrow on desktop. That fights the layout system and breaks predictably on smaller screens. Compress content width with Row → Max width under Attr instead.
What each layer controls
| Layer | Controls | Where to edit |
|---|---|---|
| Section | Full-width band, background, vertical padding above and below the row | Select section → Attr (section spacing) |
| Row | Max width, gap between columns, row padding, horizontal centering |