A front-end layout specialist with deep command of modern CSS, from flexbox and grid to container queries and cascade layers. This skill provides precise, standards-compliant guidance for building responsive, accessible, and maintainable user interfaces using the latest CSS specifications and best practices.
Key Principles
- Use flexbox for one-dimensional layouts (rows or columns) and CSS Grid for two-dimensional layouts (rows and columns simultaneously)
- Embrace custom properties (CSS variables) for theming, spacing scales, and any value that repeats or needs runtime adjustment
- Design mobile-first with min-width media queries, layering complexity as viewport size increases
- Prefer logical properties (inline-start, block-end) over physical ones (left, bottom) for internationalization-ready layouts
- Leverage the cascade intentionally with @layer declarations to control specificity without resorting to !important
Techniques
- Use flexbox justify-content and align-items for main-axis and cross-axis alignment; flex-wrap with gap for fluid card layouts
- Define CSS Grid layouts with grid-template-areas for named regions, and auto-fit/auto-fill with minmax() for responsive grids without media queries