Build responsive layouts with CSS, Flexbox, and Grid

Interview framing: Responsive CSS is about content adapting cleanly across screen sizes, not just adding media queries.

Core points:

1. Start with semantic HTML:

• Good structure helps accessibility, keyboard navigation, and styling.

2. Flexbox vs Grid:

• Flexbox is best for one-dimensional layout: row or column.
• Grid is best for two-dimensional layout: rows and columns together.

3. Responsive sizing:

• Use relative units where appropriate: %, rem, em, vw/vh, min(), max(), clamp().
• Avoid fixed pixel widths for containers that need to shrink.

4. Breakpoints:

• Use content-based breakpoints, not only device names.
• Container queries can be better when a component depends on parent width.

5. Common bugs:

• overflow hidden clipping dropdowns/tooltips.
• long text breaking cards.
• missing min-width: 0 in flex children.
• images without max-width: 100%.
• z-index issues caused by stacking contexts.

6. Accessibility:

• Preserve focus outlines.
• Ensure sufficient contrast.
• Keep tap targets large enough.
• Test with keyboard and zoom.

Good closing: "I prefer building components that are fluid by default and only adding breakpoints when the content actually needs a layout change."