The Grid System
Master TheDock's 12-column responsive grid for professional layouts.
Overview
TheDock uses a 12-column grid system for creating layouts. This system provides flexibility for any design while maintaining consistency and responsive behavior.
Why 12 Columns?
12 is divisible by:
- 2 (two equal columns)
- 3 (three equal columns)
- 4 (four equal columns)
- 6 (six equal columns)
This mathematical flexibility allows countless layout combinations while keeping proportions harmonious.
┌─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┐
│1│2│3│4│5│6│7│8│9│10│11│12│ ← 12 columns
└─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴──┴──┘
Grid Hierarchy
Understanding how the grid fits into templates:
Template
└── Section (full viewport width)
└── Grid (content container)
├── Area (column)
│ └── Block (content)
└── Area (column)
└── Block (content)
| Level | Role |
|---|---|
| Section | Full-width wrapper, sets background |
| Grid | Content container, sets max-width |
| Area | Column within grid, spans X columns |
| Block | Actual content element |
Column Spans
How Spans Work
Each area is assigned a column span - how many of the 12 columns it occupies.
Total spans in a grid row should equal 12.
Common Layouts
| Layout | Spans | Visual |
|---|---|---|
| Full width | 12 | [████████████] |
| Two equal | 6 + 6 | [██████][██████] |
| Three equal | 4 + 4 + 4 | [████][████][████] |
| Four equal | 3 + 3 + 3 + 3 | [███][███][███][███] |
| Sidebar left | 3 + 9 | [███][█████████] |
| Sidebar right | 9 + 3 | [█████████][███] |
| Asymmetric | 5 + 7 | [█████][███████] |
Setting Column Spans
- Select an area in the tree view
- In settings, find Column Span
- Choose span value (1-12)
Grid Width
The grid container has a maximum width, controlled by Grid Width setting:
| Width | Description |
|---|---|
| Small | Narrow content, more whitespace |
| Normal | Balanced default |
| Large | Wider content area |
| Huge | Maximum content width |
| Full | Edge to edge (100%) |
Setting Grid Width
Globally:
- Go to Design > Spacing
- Set Grid Width default
Per Section:
- Select a section
- Override width in settings
Grid Gap (Gutters)
The space between columns is called the gap or gutter.
Gap Sizes
| Size | Description |
|---|---|
| None | Columns touch (0 gap) |
| Small | Minimal separation |
| Normal | Standard gutter |
| Large | Generous spacing |
| Huge | Maximum separation |
Setting Gap
Globally:
- Go to Design > Spacing
- Set Grid Spacing default
Per Grid:
- Select a grid
- Override gap in settings
Grid Padding
Space between grid edge and content.
Why Padding?
- Prevents content touching screen edges on mobile
- Creates visual breathing room
- Maintains consistent margins
Setting Grid Padding
Globally:
- Design > Spacing > Grid Padding
Per Section:
- Override in section settings
Responsive Behavior
Automatic Stacking
On smaller screens, columns automatically stack:
Desktop (12 columns):
[Area 6][Area 6]
Mobile (stacked):
[Area 12]
[Area 12]
Breakpoints
| Device | Typical Width | Behavior |
|---|---|---|
| Mobile | < 768px | Usually single column |
| Tablet | 768-1024px | Reduced columns |
| Desktop | > 1024px | Full column layout |
Custom Responsive Spans
For advanced control, set different spans per breakpoint:
- Desktop span: 6 (half width)
- Tablet span: 12 (full width)
- Mobile span: 12 (full width)
Nested Grids
Grids can be nested for complex layouts:
Section
└── Grid (outer)
└── Area (span 8)
└── Grid (inner)
├── Area (span 6)
└── Area (span 6)
When to Nest
- Complex content arrangements
- Different gap requirements
- Independent responsive behavior
Caution
Deep nesting adds complexity. Keep it simple when possible.
Grid Alignment
Horizontal Alignment
When columns don't total 12:
| Alignment | Effect |
|---|---|
| Start | Columns align left |
| Center | Columns centered |
| End | Columns align right |
| Space Between | Spread with space between |
| Space Around | Equal space around each |
Vertical Alignment
When columns have different heights:
| Alignment | Effect |
|---|---|
| Start | Align to top |
| Center | Vertically centered |
| End | Align to bottom |
| Stretch | Equal heights |
Grid Overlay
TheDock provides a visual grid overlay for alignment:
Enabling Overlay
- While editing a template
- Click the Grid icon in preview controls
- Semi-transparent columns appear
Using the Overlay
- Check content alignment
- Verify column spans
- Ensure consistent margins
Best Practices
1. Use Consistent Column Counts
Stick to one or two column patterns per page. Don't mix 3-column and 5-column randomly.
2. Respect the Grid
Align elements to column boundaries. Avoid "almost aligned" layouts.
3. Consider Mobile First
Design for mobile stacking, then enhance for desktop.
4. Use White Space
Don't fill every column. Empty space is valuable.
5. Test Responsive
Preview at all breakpoints before finalizing.
6. Keep Nesting Shallow
One level of nesting maximum. Deeper = harder to maintain.
Troubleshooting
Columns don't align
- Verify spans add up to 12
- Check for inconsistent gaps
- Use grid overlay to debug
Content overflows column
- Content is wider than column
- Check image/element max-widths
- Enable overflow hidden if needed
Columns stack incorrectly on mobile
- Check responsive span settings
- Verify stacking order makes sense
Too much/little space between columns
- Adjust Gap setting
- Check if it's a grid-level or spacing-level issue
Content doesn't center
- Check grid width isn't Full
- Verify grid alignment settings