Page Composition Guide
Visual guide to all available layout options using the modern CSS Grid system.
📱 How Mobile Switching Works
The Breakpoint: 768px
All grid layouts use a single breakpoint at 768px viewport width:
- Below 768px (Mobile): All grid columns stack vertically (1 column layout)
- 768px and above (Desktop): Columns display side-by-side as designed
How It Works (CSS)
Each grid class uses CSS @media (min-width: 768px) to switch layouts:
display: grid;
grid-template-columns: 1fr; /* Mobile: 1 column */
gap: 1rem;
}
@media (min-width: 768px) {
.cr-grid-2 {
grid-template-columns: repeat(2, 1fr); /* Desktop: 2 columns */
}
}
Mobile Behavior by Layout Type
| Layout | Mobile (<768px) | Desktop (≥768px) |
|---|---|---|
| cr-grid-2 | Column 1 Column 2 |
Column 1 | Column 2 |
| cr-grid-3 | Column 1 Column 2 Column 3 |
Col 1 | Col 2 | Col 3 |
| cr-grid-3 + cr-span-2 | Sidebar Main Content |
Sidebar | Main Content (spans 2 cols) |
| cr-grid-auto | Stacks when columns < 250px | As many 250px+ columns as fit |
| cr-row | Wraps when content doesn't fit | Horizontal flexbox (no auto-stack) |
Testing Mobile Layouts
In Browser DevTools:
- Press F12 to open DevTools
- Press Ctrl+Shift+M (Windows) or Cmd+Shift+M (Mac) for device emulation
- Resize viewport or select preset devices (iPhone, iPad, etc.)
- Watch layouts switch at 768px breakpoint
Note: The cr-span-2 class only has effect on desktop. On mobile, all items stack as
single columns, so span directives are ignored.
Two-Column Layout (cr-grid-2)
Mobile: Stacks to single column. Desktop: 50/50 split.
Use case: Side-by-side content, feature comparisons, SPF/DKIM displays.
Equal width column. Automatically stacks on mobile (≤767px).
Equal width column. Side-by-side on desktop (≥768px).
Three-Column Layout (cr-grid-3)
Mobile: Stacks to single column. Desktop: 33/33/33 split.
Use case: Feature cards, step-by-step processes, icon grids.
Equal width column.
Equal width column.
Equal width column.
Sidebar + Wide Main (cr-grid-3 with cr-span-2)
Mobile: Stacks to single column. Desktop: 33% sidebar + 66% main.
Use case: Navigation sidebar + content area, form + preview, text + large image.
Narrow column for navigation, filters, or supporting content.
Wide column spans 2 grid columns. Use for primary content, images, or data displays.
Auto-Fit Grid (cr-grid-auto)
Behavior: Automatically fits as many 250px+ columns as possible.
Use case: Product cards, team member grids, responsive galleries.
Min 250px width. Wraps automatically.
Responsive without media queries.
Fits viewport dynamically.
Add as many as needed.
Flexbox Row (cr-row) - Legacy
Status: Still supported for existing pages. Use CSS Grid for new layouts.
Use case: Simple horizontal layouts without specific column widths.
Grows to fill space.
Takes 2x the space of flex: 1 items.
Grows to fill space.
Container Width Options
cr-container (Max 1200px)
Use case: Centered content with max-width constraint. Standard for most pages.
Max-width: 1200px. Centered. Padded sides.
cr-container-fluid (Full Width)
Use case: Full-width sections, hero banners, edge-to-edge layouts.
Full viewport width. Padded sides. No max-width constraint.
No Container (Body Width)
Use case: When you want natural body margins (constrained at 1400px viewport).
Uses body's natural width. Body max-width: 1400px on large screens.
Nesting Grids
Grids can be nested for complex layouts.
Quick Reference
| Class | Mobile | Desktop | Best For |
|---|---|---|---|
cr-grid-2 |
1 column | 2 equal columns (50/50) | Side-by-side content |
cr-grid-3 |
1 column | 3 equal columns (33/33/33) | Feature grids, steps |
cr-grid-3 + cr-span-2 |
1 column | 33% + 66% split | Sidebar + main content |
cr-grid-auto |
Auto-stacks | Auto-fits (min 250px) | Responsive cards/galleries |
cr-row |
Wraps if needed | Flexbox row | Legacy/simple layouts |
Breakpoint
768px - All cr-grid classes switch from mobile (1 column) to desktop (multi-column) at this breakpoint.