Center CSS grid when there are less items than columns

Question

Let's say I have a simple grid which puts items in 4 columns filling the entire container width:

.container {
  background: lightyellow;
  padding: 10px 20%;
  text-align: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  justify-content: center;
}

.item {
  height: 100px;
  background-color: red;
}

.container + .container {
  margin-top: 30px;
}

<div class="container">
  <h1>News</h1>
  <div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

<div class="container">
  <h1>News</h1>
  <div class="grid">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

As you can see, this works perfectly but only until I have 4 or more items. If I have less items, they are placed into the corresponding cells but as the right cells are empty, visually the grid starts to look "left aligned". This is not cool if the container itself is centered on the page, as in the example above.

How do I center the grid when it has 3 or less items? I tried using repeat(auto-fit, 25%) but it doesn't take grid-gap into account. repeat(auto-fit, minmax(25%, 1fr)) stretches content instead of centering it.

You can't say auto-fit, that will just stretch,and also you can't define a numbered columns count, if so you will have (say 4) columns and when one item is removed it's just the item, the column is still there, you can add one to the columns count, and have the first item start from the second line, which would center it visually, but really it's not — Rainbow, Jun 30 '18 at 10:48
This is not how Grid layout works. You have 4 columns defined. Your grid items are confined to their assigned column, unless you specify otherwise. https://stackoverflow.com/a/50239093/3597276 — Michael Benjamin, Jun 30 '18 at 11:26

score 3 · Answer 1 · answered Nov 09 '20 at 15:36

May be this is what you want:

It's using auto columns instead of template columns.

.grid {
  display: grid;
  grid-auto-columns: 22%;
  grid-gap: 10px;
  justify-content: center;
  width: 200px;
  border: solid 1px black;
  grid-auto-flow: column;
}

.item {
  height: 50px;
  background-color: red;
}

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

No, it's not what I want because it won't wrap items when there are more than 4. — Ilya Semenov, Jan 19 '21 at 18:28

score 0 · Answer 2 · 2022-09-26T19:07:23.007

0

maybe it is a late answer but here is what i came up with :

If you want to use repeat so the content automatically fits 4 columns (in this case), all you have to do is :

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 25%);
    justify-content: center;
    justify-items: center;
}

That is because the container is lets say 100%, and if you want to fit 4 columns, then simply calculate 1/4 of 100% which is 25%.

edited Sep 26 '22 at 19:07

answered Sep 26 '22 at 19:06

As I specifically told in the question, I tried this approach. With `aut-fit`, `grid-gap` is ignored. Also, your code simply doesn't work in the provided context: https://jsfiddle.net/12ykmbt8/ – Ilya Semenov Sep 28 '22 at 13:57

Alexandre Alves · Answer 3 · 2022-09-28T14:42:36.967

0

"grid-template-columns" has 25% but I have to put 20% because of the gap between the cards.

if there is no gap, just increase %.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 20%);
  grid-gap: 10px;
  justify-content: center;
}

.item {
  height: 100px;
  background-color: red;
}

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

edited Sep 28 '22 at 14:42

answered Sep 26 '22 at 22:41

Alexandre Alves

31
2

This emits 5 columns, while the UX requires that there are at most 4 columns. – Ilya Semenov Sep 28 '22 at 13:55
@IlyaSemenov Hello, it will output 5 columns if the cards have no gap space between them. if so, you can increase the % of "grid-template-columns". – Alexandre Alves Sep 28 '22 at 14:40
The 20% solution suffers from two more problems: 1) There are unwanted paddings at sides (the grid doesn't stretch to occupy the whole container width) 2) If the grid is less than 150px wide, it will wrap into 3 columns instead of 4. – Ilya Semenov Oct 19 '22 at 03:43

Center CSS grid when there are less items than columns

3 Answers3