6

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:

enter image description here

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:

enter image description here 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

IvanS95
  • 4,850
  • 4
  • 20
  • 53
  • That and `auto-fill` doesn't really mean "responsive". I'm sure there are better options if you can actually demostrate the issue. – Paulie_D Nov 22 '18 at 16:05
  • How they don't demonstrate the issue? Read again, I said I intend the grid to show the two rows as in the first picture, instead of filling another column and showing them like in the second picture, but thanks anyway – IvanS95 Nov 22 '18 at 16:10
  • Didn't think shadows were that hard to see, there you go – IvanS95 Nov 22 '18 at 16:24
  • Excellent. That's better, – Paulie_D Nov 22 '18 at 16:32
  • Add a working example please.. – Wimanicesir Nov 22 '18 at 16:32
  • 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
  • @Wimanicesir added example – IvanS95 Nov 22 '18 at 16:46
  • 1
    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
  • 1
    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
  • 1
    As a trvial solution, you can set a max-width to the grid – vals Nov 22 '18 at 20:40
  • @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

3 Answers3

2

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>
Wimanicesir
  • 3,789
  • 2
  • 10
  • 27
0

Add this code to your CSS:

grid-template-columns: auto auto auto;
Joykal Infotech
  • 1,816
  • 3
  • 8
  • 17
0

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>
Dron
  • 21
  • 4
  • 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