Katkat
Back

Build a responsive grid of fixed boxes

AmazonSoftware Engineer · Technical Screen
MediumSoftware EngineerTechnical ScreenSoftware Engineering Fundamentals

Last updated

This problem tests your proficiency in creating responsive UI layouts using CSS Flexbox or Grid and your ability to optimize rendering performance for large datasets using virtualization or efficient list rendering.

Responsive Item Grid

Your task is to build a React component ResponsiveGrid that displays a list of items as a grid of fixed-width boxes (e.g., 200px by 200px). The grid must be responsive: it should automatically adjust the number of columns based on the available container width without hardcoding media queries for specific breakpoints.

Requirements

  1. Layout: Use CSS Grid or Flexbox to ensure boxes wrap naturally. When the container shrinks, the number of columns should decrease.
  2. Performance: If the items array contains 10,000+ items, the component should handle rendering efficiently. Propose or implement a strategy to avoid DOM bloat.
  3. Accessibility: Ensure the grid is keyboard navigable and correctly announced by screen readers.

Component Signature

interface Item {
  id: string | number;
  content: string;
}

interface Props {
  items: Item[];
}

export const ResponsiveGrid = ({ items }: Props) => {
  // Implementation here
};

Example

If container width is 800px and items are 200px wide, the row should show 4 items. If container width drops to 350px, the grid should show 1 column.

Considerations

  • How do you handle gaps between items consistently?
  • What happens if the window is resized? Does the layout jump or animate smoothly?
  • How do you prevent layout shift (CLS) during initial render?

Hints

Hint 1

Use CSS Grid's `repeat(auto-fill, minmax(200px, 1fr))` property to handle the responsive column logic automatically.

Hint 2

For large datasets, use a 'windowing' or 'virtualization' library to only render the items currently visible in the viewport.

Hint 3

Ensure you use semantic HTML tags like `` and `` with `aria-grid` attributes to satisfy accessibility requirements.

Follow-up questions

  • How would you add 'infinite scroll' functionality to this grid so that more items are fetched as the user reaches the bottom?
  • If the images inside the grid items have varying aspect ratios, how would you ensure the grid remains aligned without fixed heights?
  • How would you optimize the re-rendering of the grid if the items array is updated frequently?