Layout And Organization
Lists And Tables
Row-based, separator-divided, truncating content — search results and comment-style rows, not a desktop spreadsheet grid.
Findings
What's actually in /ig
- --search-result-height:50px and --search-result-list-width:375px define a fixed-height, fixed-width row pattern.
- ._54n*-family rules (._54nh, ._54nc) confirm overflow:hidden;text-overflow:ellipsis;white-space:nowrap as the standard row-truncation rule.
- --post-separator and --ig-separator are the row-divider tokens, not a heavier table-border treatment.
Usage
When to use it
Use when
Use for vertically-scrolling rows of same-height items, including notifications, settings, search results, and comment-thread rows.
Avoid when
Avoid for dense analytical data or sortable spreadsheet-style tables; Instagram's evidenced pattern is a row list, not a grid of columns. Dashboard/analytics products that need real sortable columns should use the extended Data Tables pattern instead, which reuses this page's row/separator/hover tokens.
Anatomy
Anatomy
- 01
Row
- 02
Leading icon/avatar well
- 03
Primary + secondary text
- 04
Trailing affordance
- 05
Separator
Specification
Spacing, colour, type, and motion
- Row height
- 44px minimum; search-result rows are confirmed at 50px
- Separator
- 1px solid rgb(var(--ig-separator)) or rgb(var(--post-separator))
- Inset
- Separator inset starts 16px from the left edge when aligned to row content
- Text overflow
- overflow hidden, text-overflow: ellipsis, white-space: nowrap
- Width
- Search-result list width is capped at 375px in the documented pattern
States
States
| State | Behaviour |
|---|---|
| Default | Row rests at its fixed height with leading content, primary/secondary text, and optional trailing affordance. |
| Hover | Pointer rows receive the --ig-hover-overlay treatment without changing row height. |
| Pressed | The row applies a slightly stronger overlay while the action is held. |
| Disabled | Unavailable rows drop to 55% opacity and remain visible. |
| Selected | Selected rows hold the active overlay or check affordance while preserving truncation and separators. |
Examples
Real interface compositions
Search
Search result list
Rows for @julesframes, @noahshotit, and #streetportraits hold a fixed avatar well, two truncating text lines, and a trailing follow action inside the 375px result column.
50px rows, 375px list width, --post-separator, ellipsis text
Guidance
Usage guidance
- Fix row height (Instagram's search rows are 50px) rather than letting content stretch it — every row-list pattern found is fixed-height.
- Truncate with ellipsis; don't wrap row text to multiple lines.
Do / Don't
Do / Don't
Do
- Use a 1px --post-separator or --ig-separator between rows, not a heavier table-grid border.
Don’t
- Build a sortable, multi-column spreadsheet-style table — Instagram row patterns are single-column content with a leading/trailing affordance. See Data Tables if your product genuinely needs that.
See also