Restricting responsive grid to 2 columns max?

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.

check last snippet here: https://stackoverflow.com/a/64136397/8620333 — Temani Afif, Oct 01 '20 at 23:05
I take it that this ( grid-template-columns: repeat(auto-fit, minmax(max(240px,40vw), 1fr)); ) is the line in question? I adjusted this to grid-template-columns: repeat(auto-fit, minmax(max(195px,24vw), 2fr)); as each column is meant to be 24% of the total screen width but the result is that I only ever get a single column now. — Maria Lin, Oct 01 '20 at 23:14
reduce the 24vw to 21vw for example, it should not be exactly 24% of the screen. I have used 40vw because I needed 50% of the screen — Temani Afif, Oct 01 '20 at 23:25
It looks like 19vw was the sweet spot. There is some strange behavior with padding now but that I can live with. Thanks for your help. — Maria Lin, Oct 01 '20 at 23:32

Temani Afif · Accepted Answer · 2021-05-12T13:52:40.240

3

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

edited May 12 '21 at 13:52

answered Oct 01 '20 at 23:38

Temani Afif

245,468
26
309
415

1

What worked better for me was to change vw to percent. `max(195px, 50%)` – Jeff Walters May 12 '21 at 13:49
@JeffWalters thank you! Having the responsivenes depend on `vw` as temani-afif answered leads to the column count changing if the viewport width (aka browser) becomes very wide. With `%` it instead depends on the container's width. – maninak Feb 03 '22 at 11:36

score -1 · Answer 2 · answered Oct 02 '20 at 01:33

-1

You can use like that also...

grid-column: 1 / 2;

answered Oct 02 '20 at 01:33

Ishita Ray

672
3
8

Restricting responsive grid to 2 columns max?

2 Answers2