Using the column repeat method is also a fantastic way to build beautiful, responsive image galleries, even with images of differing sizes. You even have access to dynamic packing algorithms with the grid-auto-flow: dense; instruction, which will prevent any empty row spaces due to different image heights (they must scale with each other in relative fr units for this method to work, however, which is why we won’t use it for our cards shown below).
Neat how we used a grid container for these, which is inside of our main page grid container, right? We did this because it’s the most straight-forward, elegant solution to use for the needed responsiveness of the card items. Our instruction repeat(auto-fit, minmax(265px, 1fr) takes care of a couple of major hurdles:
1) If cards go below 265px in width, they will wrap to another row 2) If cards go above 265px in width, they will stretch to take up the available remaining container width 3) When cards wrap to a new row (auto-fit), they will line up from left to right with the cards above them, matching their widths! And you also get built-in responsiveness without any media queries!