# Name the layout you are pointing at

Header, sidebar, grid, dialog: give your feedback coordinates.

ID: layout
Language: en
Revision: 2
Translation source revision: 2
Canonical: https://jujin.dev/en/guides/layout/

## Concept

Layout arranges regions. Headers identify, navigation connects sections, cards group content, and modal dialogs interrupt a task.

## Example

Catalog: header → filter toolbar → card grid → footer. On mobile, stack content in reading order.

## When to choose it

Grids aid scanning; lists accommodate long titles. Sidebars consume width. Dialogs require clear closing and focus management. Start with semantic landmarks and one mobile column. Include empty, loading, error, and keyboard states. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) · [WAI](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)