arrange

Adopt a defined spacing scale such as a Tailwind scale, rem-based tokens, or custom properties, and stop using arbitrary values. Use gap for sibling spacing instead of margins, and apply clamp() for fluid spacing on larger screens.

Use Flexbox for one-dimensional layouts like nav bars, button groups, and card internals. Use Grid for two-dimensional page structures and dashboards where rows and columns need coordinated control. Prefer the simplest tool for the job.

Use space and weight first: generous whitespace around key elements draws the eye, and tight grouping with generous section separation creates clear groupings. Add color or size contrast only when simpler means are insufficient.

Layout problems are often the root cause: arbitrary spacing values, equal padding everywhere, identical repeated card grids, and everything centered. Fixing rhythm, hierarchy, and structure usually resolves the issue.

Blur your vision of the page and check whether you can still identify the most important element, the second most important, and clear content groupings. If hierarchy disappears when blurred, spacing and weight need adjustment.