Start from the smallest useful card
A grid should be designed around what each card needs to communicate. A project card might contain a thumbnail, title, short description and link. Try that content in a narrow single column before choosing the desktop arrangement. If the card only works with a short title, the layout is not ready for real content.
Let available space set the column count
A useful starting rule is grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)). The minimum gives a card room to breathe, while the inner minimum prevents that size from exceeding a tiny container. The flexible maximum shares remaining space. This creates natural column changes without a separate media query for each possible width.
Use gaps instead of card margins
Apply spacing through the grid’s gap property so the outer container stays predictable. For example, a 1.25rem gap separates rows and columns consistently without extra margins on the last card. Give the page its own inline padding. Separating container spacing from card spacing makes later changes easier to reason about.
Keep the card’s internal structure stable
Cards with different description lengths can still align their final action. Make each card a column flex container and allow the action area to use margin-block-start:auto. Reserve the thumbnail’s aspect ratio so its arrival does not push text downward. Do not force a fixed overall card height if that risks hiding longer content.
Handle content that resists shrinking
A long URL, code token or unbroken project name can stretch a track unexpectedly. Inspect the relevant item’s minimum width and allow wrapping where it is appropriate. A min-width:0 rule on an inner wrapper can solve a different problem from overflow-wrap on text. Neither should be added blindly to every descendant.
Test the spaces between screenshots
Drag the viewport gradually rather than checking only a phone and a desktop preset. Look for the moment a third column becomes too cramped, and inspect the last incomplete row. Also try one card, nine cards, enlarged text and a translated heading. The grid should adapt to its content instead of depending on a perfect demo dataset.
Further reading
Put the idea to work.
Explore free browser tools for images, text and developer workflows.