Build a responsive grid of fixed boxes
Company: Amazon
Role: Software Engineer
Category: Software Engineering Fundamentals
Difficulty: medium
Interview Round: Technical Screen
## Task (React/CSS)
Render a list of square “boxes” on a page:
- Initially there are **10 boxes**.
- Each box is **100px × 100px**.
- Boxes should lay out left-to-right and **wrap to the next line** when they no longer fit in the container.
You may use any reasonable HTML/CSS approach (e.g., Flexbox).
## Follow-ups
1. If the list grows to **100+ boxes**, how would you make rendering and interaction **scale** (performance + UX)? Discuss options such as pagination and infinite scrolling.
2. If you choose **pagination**, what would you do to ensure the pagination UI and page changes are **accessible (a11y)** for keyboard and screen-reader users?
Quick Answer: This question evaluates front-end layout and responsiveness skills including HTML/CSS and React component rendering, plus performance scaling for large lists and accessibility considerations, and is categorized in the Software Engineering Fundamentals domain.
