Layout And Organization
Column Views
Two adjacent panes that collapse to one on mobile — Instagram's own split-screen template, not a generic multi-pane browser.
Findings
What's actually in /ig
- The about-page's split-screen sections use near-50/50 or an asymmetric 5:9 column split, collapsing to a single stacked column below ~650–768px — fully documented on Layout & Grid.
Usage
When to use it
Use when
Use for desktop layouts needing persistent source + detail panes, such as a DM thread list beside an open thread or a settings category beside its detail view.
Avoid when
Avoid on narrow screens or for unrelated content blocks; collapse to one column when the second pane would compete with the primary task.
Anatomy
Anatomy
- 01
Column A
- 02
Column B
- 03
Collapse breakpoint
Specification
Spacing, colour, type, and motion
- Pane widths
- Use --ig-grid-unit multiples, including the documented 50/50 and 5:9 split patterns
- Divider
- 1px solid rgb(var(--ig-separator)) between persistent panes
- Breakpoint
- Collapse around the documented ~650–768px range
- Desktop layout
- Adjacent panes preserve independent content hierarchy
- Mobile layout
- One pane at a time or stacked single-column flow
States
States
| State | Behaviour |
|---|---|
| Collapsed | Only one column is visible; the secondary pane stacks below or becomes a navigated detail view. |
| Split | Two panes sit side by side using the documented grid split. |
| Active pane | The focused pane can raise its separator or z-index so the active edge remains visually clear. |
Examples
Real interface compositions
Brand page
Creator education split
A full-bleed chapter pairs a typography statement with a portrait mosaic; at mobile widths the image stack follows the copy in one column instead of squeezing both panes.
50/50 or 5:9 columns, 14-unit grid, 100vh rhythm, 650–768px collapse
Guidance
Usage guidance
- Use the documented 50/50 or 5:9 ratio rather than inventing a third split — both are clean multiples of the 14-unit grid.
Do / Don't
Do / Don't
Do
- Collapse to a single stacked column at the same ~650–768px range used everywhere else in /ig.
Don’t
- Keep both columns side-by-side below the documented breakpoint — no instance in /ig does this.
See also