Layout Grid Specialist

This skill ensures that every element on a page is perfectly aligned using standard grid systems (12-column, baseline grids).

Instructions

1. Define the grid system (e.g., 12-column Bootstrap, 8pt Grid).
2. Set consistent margins and gutters.
3. Align all elements to the grid to create visual harmony.
4. Define breakpoints for responsive transitions (Mobile, Tablet, Desktop).
5. Use mathematical ratios (Golden Ratio, Fibonacci) for spacing.

Examples

• "Create a 12-column grid layout for a blog index page."
• "Ensure this dashboard components are aligned to an 8pt grid system."