Layout And Organization
Collections
A horizontally-scrolling row of repeating items — the about-page's mosaic and card rows, and the production app's hidden-scrollbar carousels.
Findings
What's actually in /ig
- overflow-x: scroll with scrollbar-width: none / a hidden ::-webkit-scrollbar recurs for mobile galleries and card rows in /ig.
- The about-page mosaic grid is the asymmetric, non-uniform version of a collection — see Imagery.
- .uiScrollableAreaWrapHorizontal{overflow-x:auto} is the legacy desktop equivalent for horizontally-scrolling containers.
Usage
When to use it
Use when
Use for a uniform grid of media items — profile grid, Explore grid, hashtag feed — where repeated image cells form the primary browsing surface.
Avoid when
Avoid when items have mixed anatomy or variable row heights; those belong in Lists And Tables or a bespoke editorial mosaic.
Anatomy
Anatomy
- 01
Scroll track
- 02
Item
- 03
Hidden scrollbar (mobile) / custom gripper (legacy desktop)
Specification
Spacing, colour, type, and motion
- Grid gap
- Use spacing scale gaps, typically --space-2 or --space-3
- Columns
- Column count is driven by layout grid units and available viewport width
- Item frame
- Each item uses Image Views ratio and object-fit: cover rules
- Touch overflow
- scrollbar-width: none and hidden ::-webkit-scrollbar for touch galleries
- Desktop overflow
- .uiScrollableAreaWrapHorizontal{overflow-x:auto} when the collection scrolls horizontally
States
States
| State | Behaviour |
|---|---|
| Loading | Cells render skeleton frames or shimmer while media resolves. |
| Populated | The grid or row is filled with repeated media items using stable gaps and crops. |
| Empty state | The surface keeps its grid container but shows concise empty copy or an upload/follow prompt. |
| Refreshing | Existing cells stay in place while new results load, avoiding a full layout reset. |
Examples
Real interface compositions
Profile header
Story highlight tray
Circular highlight covers scroll horizontally beneath the bio; touch viewports hide the scrollbar while desktop keeps native horizontal motion rather than pagination dots.
overflow-x: scroll, hidden scrollbar, 8px item gap, avatar circle primitive
Guidance
Usage guidance
- Default to horizontal scroll with native momentum and a hidden scrollbar on touch — that's the consistent mobile pattern across every gallery-like surface in /ig.
- Use the legacy desktop fallback when a visible affordance is needed: a custom-styled scrollbar gripper, not pagination dots.
Do / Don't
Do / Don't
Do
- Hide the scrollbar on touch viewports, matching every mobile gallery in /ig.
Don’t
- Add dot pagination under a free-scrolling collection — reserve Page Controls for short, manually paged sequences.
See also