Problem: Fluid-Width Responsive Grid with Aspect Ratio Elements

med

30 min

Try to create a responsive grid where each grid item maintains a consistent aspect ratio (e.g., 16:9) while the grid itself uses fractional columns that adapt to the viewport, producing fluid-width items without distortions.

Problem description

Design a grid container that:

Uses repeat(auto-fit, minmax(200px, 1fr)) to create responsive columns that automatically fit the available space.
Ensures each grid item maintains a 16:9 aspect ratio regardless of its width.
Has a 1rem gap between items to provide consistent spacing.

Grid items should scale fluidly across viewport sizes, preserve the aspect ratio, and wrap naturally as space allows, adjusting the number of columns based on the container width.

Goal

Implement CSS rules in styles.css to set up the grid container and enforce a 16:9 aspect ratio on each grid item using CSS only.

Constraints

Use CSS Grid with auto-fit/minmax.
Use the CSS aspect-ratio property or a padding-top hack for older browsers.
Set the gap to 1rem.
Set the minimum item width to 200px.

Sample visual output

Here’s what the output would look like: