Restricting responsive grid to 2 columns max? - css

Question

I have a two column layout in which one column displays a number of images on a grid. The size and number of the images vary. I want the images to either show one a line, or two per line, depending on the size of the image and the screen. I have the below grid set up:
#media (max-width: 2000px) {
.productimg {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(195px, 2fr));
grid-gap: 5px;
grid-auto-flow: row dense;
}
The images are given a class .u-max-full-width to keep them contained within the grid:
.u-max-full-width {
max-width: 100%;
box-sizing: border-box; }
For the most part this works. See below for the ideal layout:
However, at certain screen widths the images break into three columns. This happens with particularly thin images as soon as it is possible to put three 195px width images on the same line. I thought it might be that the images reach their source width and then rather than remain there shrink back to 195px but they are moving down to 195px before reaching their max size.
For example, images with a width of 336, 353, and 390 respectively will switch to a three col. when the container div is only 595px wide, more than small enough for the 336px and 353px images to fill it without forcing a third in.
If I increase the min width this solves the issue, however, the images will not properly fall into two rows at smaller resolutions. I tried using a #media declaration for the range where the container div can hold three 195px images, and declaring an absolute max size.
#media (min-width: 1542px) and (max-width: 2000px){
.productimg {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(195px, 350px));
grid-gap: 5px;
grid-auto-flow: row dense;
}
This does seem to prevent three columns from developing, but now it jumps from two to one columns between 1541 and 1542px in screen width because the max width is being prioritized, which is not what I want at all.
What I want to do is keep the columns to a maximum of two but to fill the row completely as long as the images are not smaller than 195px in width, but I can't seem to find any way to do that simply. I have looked at all of the various formatting declarations for grid, but am struggling to conceptualize their use. I wonder if grid is even the appropriate tool to use in this situation, but I haven't found any better solution.
Any assistance in this issue would be appreciated.

Answer 1

Use max() combined with viewport unit to make the column width always big enough to always have a fixed number of columns on big screen (in your case 2).
grid-template-columns: repeat(auto-fit, minmax(max(195px,Xvw), 2fr));
Adjust the X until you get the result you want.
Example:
.box {
display:grid;
grid-template-columns: repeat(auto-fit, minmax(max(195px, 45vw), 2fr));
margin: 10px;
grid-gap: 40px;
}
.box>* {
height: 100px;
background: red
}
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Related question: CSS grid maximum number of columns without media queries

Answer 2

You can use like that also...
grid-column: 1 / 2;