This really isn’t a case I’d suggest using grid for. Grid is great for making complex layout when you lack the document structure or semantics for flex, and you know the number of elements and their placement/arrangements are fixed. It’s not a great choice in situations where you might want responsive layout or wrapping of an arbitrary number of elements.
Flex is probably the better choice for something like this, particularly thanks to the flex-wrap property.
Likewise I’d use float inside the cards as nested grids can be… wonky cross-browser. Though with Chakra based Edge going away and Blink/Quantum/Webkit being the only engines that matter, that’s less and less of a worry.
To summarize the how/what/why, It’s flex with auto-wrap, using generated content with a counter as per what @PaulOB did, using less “classes for nothing” since we now have useful selectors, The 26% flex-basis is a cute trick so you don’t have to worry about the box model or margins. If they’re set to flex-grow you’ll end up with three across until the min-width kicks in to force them smaller.
In production a media query should probably be tossed on there to disable the min-width and maybe switch the floats to inline-block.