# Desktop UI Grids Layout

> Use whenever designing or reviewing grid systems, gallery/asset grids, alignment, or list-vs-grid view formatting in a desktop app. Depends on desktop-ui-foundations and desktop-ui-spacing-sizing. Trigger on "grid layout," "gallery view," "alignment," "columns," or "list vs grid."

- Skill: `simply-ehis/desktop-ui-grids-layout` (Agent Skill)
- Install (CLI): `npx skillmds@latest add simply-ehis/desktop-ui-grids-layout`
- Raw SKILL.md: https://api.skillmd.com/api/skills/simply-ehis/desktop-ui-grids-layout/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: simply-ehis (https://skillmd.com/u/simply-ehis)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/simply-ehis/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

| Before | After | Why |
|---|---|---|
| Asset grid hardcoded to always show 4 columns | Column count calculated from a target card width against the available window width | A fixed column count either wastes space or crowds the grid depending on window size |
| Grid mixes portrait and landscape thumbnails at their native aspect ratio, uncropped | Thumbnails cropped to one consistent aspect ratio (or a deliberate masonry layout) | Mixed ratios by accident look chaotic; the fix is a deliberate choice, not an accident |
| File size column left-aligned in a data table | File size column right-aligned | Right-aligned numbers let the user visually compare magnitudes down the column |