Consider the following example (you may have to paste the code into a separate document to see the effect):

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
}

.item {
  background-color: #bfe0f5;
  height: 300px;
  cursor: pointer;
}

.separation {
  margin: 100px 0;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

<div ></div>

<div >
  <div ></div>
  <div ></div>
</div>

The first grid works wonderfully. That is, as the window resizes, the number of columns grows or shrinks based on what can be fit.

However, if there are a very small number of items in the grid (like 1 or 2), I instead want them to adhere to a max width on desktop.

That is, on desktop, if there's only a few items in the grid, I'd want it to look like this:

On mobile, of course, since the screen space is more limited, then there'd likely only be one per row (and the size as a result would be larger than 300px, to fit up the remaining space).

Basically, the above code works perfectly EXCEPT in the case of when the user is on desktop and there are only 1 or 2 items in the grid. Is it possible to alter the above code to handle that case as well? Because in that case I want the items to adhere to a max width.

I tried just setting the max-width property on the items and then disabling it in a media query on mobile screen sizes, but then the problem is that the entire row is still clickable, despite the max-width only being 300px.

CodePudding user response：

Try using auto-fill instead of auto-fit when declaring grid-template-columns.

auto-fill FILLS the row with as many columns as it can fit. So it creates implicit columns whenever a new column can fit, because it’s trying to FILL the row with as many columns as it can. The newly added columns can and may be empty, but they will still occupy a designated space in the row.

auto-fit FITS the CURRENTLY AVAILABLE columns into the space by expanding them so that they take up any available space. The browser does that after FILLING that extra space with extra columns (as with auto-fill ) and then collapsing the empty ones.

source

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
}

.item {
  background-color: #bfe0f5;
  height: 300px;
  cursor: pointer;
}

.separation {
  margin: 100px 0;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

<div ></div>

<div >
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

You should set the max-width on the grid, not the items themselves. In this specific case

.grid {
    max-width: 620px;
}

should do the trick. (2 * 300px 20px for the gap).