How to limit the amount of columns in larger viewports with CSS Grid and auto-fill/fit?

Question

I'm starting to work with CSS Grid, I've been reading about the properties to help with responsiveness; so I'm trying to build a small grid with 6 elements; my intention is for them to show as 2 rows on larger devices like this:

And also to show them all stacked on smaller devices,so everything is good regarding the smaller devices, I'm using auto-fill so it stays responsive, however if I the view the page on a laptop screen or desktop it is able to fill one more column and ends up looking like this:

This is my grid layout code.

display: grid;
grid-template-columns: repeat(auto-fill, 260px);
justify-content: center;
row-gap: 18px;
column-gap: 18px;

Is there a way to keep the responsive behavior but setting a max number of columns as well? Any help is appreciated; If it can only be done with media-queries that's fine, but I'm first trying to look for ways to do it without using those. Also, I kinda made it work as intended by setting a horizontal padding to the whole grid container to compensate for the size of the additional column; but again, if there's a better way I'm all ears. Thank you!

Working Example https://codepen.io/IvanS95/pen/NEYdxb

So why not define the number of columns and use a media query when required? — Paulie_D, Nov 22 '18 at 16:34
@Paulie_D That's actually what I said at the end of the description; I can use media queries, I wanted to know if there's a way to do it **without** media-queries — IvanS95, Nov 22 '18 at 16:38
I'm not entirely sure (I'm on mobile), but would: `grid-template-columns: repeat(minmax(auto-fill, 3), 260px);` address the issue? In my head - and bear in mind I've not tried this in code yet - it should use `3` as three maximum number of columns, and `auto-fill` otherwise. — David Thomas, Nov 22 '18 at 16:53
@DavidThomas tried it but doesn't work, I don't think the `minmax()` function can be used in place of a single value there — IvanS95, Nov 22 '18 at 16:58
You **can't** use `auto-fill` with a **set** number of columns...it's not possible nor is it expected behaviour. If you *know* how many columns you want, just define them. `auto-fill` will do exactly that...fill the available space and *then* wrap. — Paulie_D, Nov 22 '18 at 17:22
@vals that's kinda what I did at the end, I just set a horizontal `padding` on the grid so it can't fit just another column — IvanS95, Nov 22 '18 at 22:19

Wimanicesir · Accepted Answer · 2018-11-23T14:16:09.517

1

Use this syntax:

grid-template-columns: 260px 260px 260px;

Or

grid-template-columns: repeat(3,260px);

Instead of this:

grid-template-columns: repeat(auto-fill, 260px);

Use media queries to set less columns on smaller screens.

Also if the row and column gap is the same you can use grid-gap.

Documentation

.grid-container{
  display: grid;
  grid-template-columns: 260px 260px 260px;
  grid-gap: 18px;
  background-color: #fff;
  color: #444;
  justify-content: center; 
}

.card {
   border: 1px solid #000;
   width: 260px;
   height: 260px;
}

<div class="container">
   <div class="grid-container">
   <div class="grid-item">
      <div class="card"></div>
   </div>
   <div class="grid-item">
      <div class="card"></div>
   </div>
   <div class="grid-item">
      <div class="card"></div>
   </div>
   <div class="grid-item">
      <div class="card"></div>
   </div>
   <div class="grid-item">
      <div class="card"></div>
   </div>
   <div class="grid-item">
      <div class="card"></div>
   </div>
</div>
</div>

edited Nov 23 '18 at 14:16

answered Nov 23 '18 at 00:25

Wimanicesir

4,606
2
11
30

1

Will do, I'll just keep using the `repeat()` function though as it looks cleaner to me, as in `repeat(3, 260px)` – IvanS95 Nov 23 '18 at 14:12
Solid point @IvanS95, I'm going to edit it in for future reference :) – Wimanicesir Nov 23 '18 at 14:15
Where is the demonstration of media queries to do what OP is actually asking for here? – TylerH Feb 27 '23 at 19:38
@TylerH, The OP asked: **If it can only be done with media-queries that's fine, but I'm first trying to look for ways to do it without using those.** This is indeed a solution without media queries :) – Wimanicesir Mar 06 '23 at 08:04
@Wimanicesir Yes, but _your answer_ says "*Use media queries to set less columns on smaller screens.*" but then doesn't include any media query example usage. – TylerH Mar 06 '23 at 20:27

score -1 · Answer 2 · answered Nov 23 '18 at 10:43

-1

Add this code to your CSS:

grid-template-columns: auto auto auto;

answered Nov 23 '18 at 10:43

Joykal Infotech

1,840
3
9
17

This makes no difference; the grid items do not wrap. – TylerH Feb 27 '23 at 19:39

score -1 · Answer 3 · answered Nov 14 '19 at 06:02

-1

you just need to wrap them separately.

<div class="grid-container">
  //grid-items
</div>
<div class="grid-container">
  //grid-items (2nd row)
</div>

our same style code works until grid-container wraps.

In your code, white this html. Other, same css should work.

.grid-container{
   display: grid;
   grid-template-columns: repeat(auto-fill, 260px);
   justify-content: center;
   row-gap: 18px;
   column-gap: 18px;
}

.card {
   border: 1px solid #000;
   width: 260px;
   height: 260px;
}

<div class="container">
   <div class="grid-container">
     <div class="grid-item">
        <div class="card"></div>
     </div>
     <div class="grid-item">
        <div class="card"></div>
     </div>
     <div class="grid-item">
        <div class="card"></div>
     </div>
   </div>
   <div class="grid-container">
     <div class="grid-item">
        <div class="card"></div>
     </div>
     <div class="grid-item">
        <div class="card"></div>
     </div>
     <div class="grid-item">
        <div class="card"></div>
     </div>
   </div>
</div>

answered Nov 14 '19 at 06:02

Dron

19
5

That's exactly what I'm trying to avoid, the idea is to be able to wrap the grid items, but at the same time setting a max amount of items on the row; so they all have to be on the same container so they wrap accordingly without leaving empty spaces, as in your example – IvanS95 Nov 14 '19 at 13:02
But @IvanS95 , you can always set max amount of items from `grid-template-columns: 260px 260px 260px;` or using repeat (where you can set **max amount of items ** as you mentioned because it will straightly take that number of cards available in HTML as long as responsiveness is not your concern. Thank you – Dron Nov 15 '19 at 04:34
That was my point though, as I mentioned, I want to have 3 columns max even if more might fit, but keep it responsive if the screen is smaller with auto-fill so that if 3 can't fit, then they wrap. That's on my question – IvanS95 Nov 15 '19 at 13:10
This creates an unwanted intermediate step of two-one-two-one wrapping at intermediate widths. – TylerH Feb 27 '23 at 19:39

How to limit the amount of columns in larger viewports with CSS Grid and auto-fill/fit?

3 Answers3

Linked