Desktop UI Grids Layout

Grids & Layout Formatting (Desktop)

The underlying alignment grid

Every screen should align to the same base grid, built from the spacing scale in foundations (4px units) — column gutters, card padding, and edge margins should all be multiples of that same scale. This is what makes a screen feel assembled with intent rather than eyeballed; misaligned edges (a card padded 14px on one screen and 18px on another) are individually invisible but collectively read as sloppy.

Content grids (galleries, asset browsers, card collections)

For views showing many similar items (a project gallery, an asset library, a file grid):

• Responsive column count, not a fixed number: define a target card width (e.g. 200–240px) and let the number of columns that fit the current window width be calculated from that, rather than hardcoding "always 4 columns" — a hardcoded column count either wastes space in a wide window or crowds a narrow one.
• Consistent gutter, tied to the spacing scale (16 or 24px is typical), between both rows and columns — uneven horizontal vs. vertical gutters look like a mistake.
• Uniform card aspect ratio within a single grid (all thumbnails cropped/fit to the same ratio) — a grid mixing aspect ratios per item looks chaotic; if content varies wildly in shape, either crop to a shared ratio or switch to a masonry layout deliberately (see below), not by accident.
• Masonry (variable-height columns) is appropriate only when preserving each item's natural aspect ratio is genuinely valuable (a photo/video library) — for anything else, a uniform grid scans faster and aligns better with the rest of the app's grid system.

List vs. grid view

Many desktop tools (file managers, asset browsers, project lists) benefit from offering both:

• Grid: better for visually distinct items where recognizing the thumbnail is the primary way the user finds what they want.
• List: better for items best scanned by metadata (name, date, size, status) or when the count is large enough that a dense list finds things faster than scrolling a grid.
• If both are offered, make the toggle a segmented control (see desktop-ui-buttons-controls) placed consistently near the view's search/filter controls, and persist the user's last choice per view rather than resetting it every session.
• List rows should use the row-height and density conventions from desktop-ui-spacing-sizing, with columns aligned to a real column grid (not just flexboxed into rough alignment) so scanning down a column of values (sizes, dates) actually lines up.

Alignment discipline

• Left-align text by default (including in tables/lists); reserve center-alignment for short, standalone labels (button text, badges) — center-aligned paragraphs or multi-line labels are hard to scan and read as a website-template habit rather than an app-design one.
• Right-align numeric columns in tables (file sizes, counts, prices) so digits line up vertically for fast comparison.
• Icons and their adjacent text should share a consistent baseline/vertical-center alignment — a slightly-off icon next to a label is a small thing that's very easy to notice once you're looking for it.

Accessibility

Asset/gallery grids need arrow-key navigation between cells (not just Tab through every single item one at a time) so a keyboard-only user can move through a large grid the way a mouse user would scan it visually. Every grid item needs an accessible name (a filename, title, or description) exposed to the platform's accessibility API — an image-only tile with no text anywhere is invisible to a screen reader. See desktop-ui-accessibility-i18n.

Review format