Build a card grid that fits as many columns as the width allows, with no media queries. How does auto-fit + minmax work?
Whether you can reach for 2D grid and the auto-fit/minmax idiom for responsiveness.
Grid is TWO-dimensional: you define columns AND rows and place items into cells. grid-template-columns sets the tracks; the fr unit distributes leftover space (1fr 1fr = two equal columns). repeat(N, …) avoids repetition. The responsive idiom needs no media queries: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). minmax(200px, 1fr) means each column is at least 200px and grows to share extra space; auto-fit creates as many 200px+ columns as fit, then stretches them to fill the row. (auto-fill is the sibling — it keeps empty phantom tracks instead of stretching the real ones, so items don't widen to fill.) gap spaces tracks. You can also place items explicitly with grid-column: 1 / 3 (span two columns) or name areas with grid-template-areas for whole-page layouts. Rule of thumb: grid for the overall page skeleton and any rows-and-columns arrangement; flexbox for one-axis content inside a grid cell. They compose — grid outside, flex inside — constantly.
Card galleries, dashboards, image grids, and any full-page skeleton with both rows and columns.