Quick answer
Start with normal document flow. Use Flexbox to arrange items along one main direction and Grid when rows and columns need to work together. Let content determine where a layout needs to change.
Build a small example
For a project list, try a grid that creates as many readable columns as the container can fit.
.projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1rem;
}The inner minimum lets a card shrink below sixteen rem on narrow containers. The flexible maximum shares remaining space between columns.
Try it yourself
Add three cards with different title lengths. Resize the window slowly. Increase text size and add an unusually long word. Inspect the element that first extends past its container before changing a breakpoint.
Common mistake
Adding overflow hiding can conceal the cause of a broken layout. Check fixed widths, minimum sizes, long content and child elements first.
Check your understanding
Why might three fixed-width cards overflow on a phone? Their combined widths and gaps can exceed the available space. A responsive layout must account for both.
Next step
Build the same cards using normal flow, then Grid, and explain what the second version improves.
Sources and further reading
Published 2 November 2026. Examples are teaching exercises, not claims about client results.