# Two columns

Compare the same six resources.

ID: two-columns
Language: en
Revision: 3
Translation source revision: 3
Canonical: https://kickoff.jujin.dev/en/catalog/two-columns/

## Why: the goal or problem

People need filters while browsing a long collection. Scrolling back to controls repeatedly interrupts exploration.

## How: work toward a solution

All six layouts use the same six resources, labels, and colors. Filter a topic, reverse collection order, open study notes, or narrow the preview. Compare the reading flow while the content stays the same. Reset or reload restores the full collection and original order. Filters sit beside the resource list; guidance follows the list.

## What: the concept

**Two columns** — Two adjacent regions separate filters from resources.

Sidebars reduce reading width, so stack regions before they become cramped.

[W3C](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html)