Build a responsive grid of fixed boxes

Q: Build a responsive grid of fixed boxes

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.

Q: How do I approach Software Engineering Fundamentals interview questions?

Software Engineering Fundamentals questions require understanding of core concepts and practice. PracHub provides solutions with explanations to help you master software engineering fundamentals interviews.

Question

Loading...

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

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.
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?

Build a responsive grid of fixed boxes

Quick Overview

Task (React/CSS)

Follow-ups

Solution

Comments (0)