CODEWITHSUNDEEP
htmlcssresponsive-designcss-grid
Ryan Peschel
Ryan Peschel

Reputation: 11756

How to have a responsive grid with a max-width for items on desktop?

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 class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="separation"></div>

<div class="grid">
  <div class="item"></div>
  <div class="item"></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:

enter image description here

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.

Upvotes: 1

Views: 132

Answers (2)

Sigurd Mazanti
Sigurd Mazanti

Reputation: 2395

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 class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="separation"></div>

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
</div>

Upvotes: 1

user23345454545
user23345454545

Reputation: 1

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).

Upvotes: 0

Related Questions