CSS grid - maximum number of columns without media queries

Is it possible to define a grid with a maximum number of columns, but allow elements to wrap onto new rows when the screen width changes?

I have implemented classes that allow rows to wrap onto new rows, but there is no maximum number of columns.

Here is a CodePen of one method using Flexbox:

CSS:

.flex-container {  display: flex;  flex-wrap: wrap;}

Another method is to use a grid:

.grid {  display: grid;  counter-reset: grid-items;  position: relative;}.grid--auto-fit {  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}

I want a fairly generic solution to this. Is what I want to achieve possible without JavaScript or media queries?