Responsive cards and auto-fit, auto-fill

Short question, and it might not have a straight forward answer. But here we go ...
In this codepen I'm testing all things responsive, and the goal is to avoid using @media. As Kevin has pointed out in several videos, there should only be need to add complexitiy if necessary.
https://codepen.io/amarlong/pen/LYrmpNO

So my cards are controlled with auto-fit, and between view width 1280px and 960px the four cards stack out with three on top and one underneath. Is there anyway to force them to do a two over two (without @media) between that pixel range, or is this a limitation of auto-fit/fill?
Was this page helpful?