layout

Replace arbitrary padding and margin values with a consistent spacing scale, such as a framework scale like Tailwind or rem-based tokens. 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 layouts like page structure and dashboards where rows and columns need coordinated control. Don't default to Grid when Flexbox with flex-wrap is simpler.

Use space and weight first: generous whitespace around an element draws the eye, and tight grouping with generous section separation creates clear structure. Add color or size contrast only when simpler means are not sufficient.

Layout problems are often the root cause: arbitrary spacing values, equal spacing everywhere, identical repeated card grids, and everything centered. Fixing rhythm, grouping, and hierarchy usually resolves the issue without touching typography or color.

Avoid arbitrary spacing values, nesting cards inside cards, wrapping everything in containers, centering all content, and arbitrary z-index values like 9999. Build a semantic z-index scale and use spacing and dividers for hierarchy within components.