Responsive profile grid
Create a fluid card grid that adapts from narrow screens to wide layouts.Description
Requirements
The profile collection uses CSS Grid with repeat, auto-fit, and minmax to create its columns.
Profile cards share the available row width in equal fluid columns without fixed card widths.
At a 375 pixel viewport, cards form one readable column.
At a 1440 pixel viewport, the four cards form multiple equal-width columns.
The profile grid does not increase the document's horizontal scroll width at 375, 768, or 1440 pixels.
Every avatar has equal computed width and height and a fully circular border radius.
Long names and role text wrap inside their cards instead of expanding the viewport.
Narrow container
Resize the preview to 320px wide
Cards form one readable column with no horizontal overflow
Wide container
Resize the preview to 1000px wide
Cards fill multiple equal-width columns
Constraints
Use CSS Grid with repeat, auto-fit, and minmaxDo not set a fixed width on profile cardsLong text must wrap without expanding the viewport
Hints
Hint 1
Start with a grid whose column definition can create and remove tracks automatically.
Hint 2
Use a minimum card size paired with a flexible maximum so spare space is shared evenly.
Hint 3
Constrain grid children and text so long content can shrink and wrap inside each track.