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.

Kisangani

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 – Potted

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://mcmap.net/q/225769/-aligning-grid-items-across-the-entire-row-column-like-flex-items-can – Captive

Answer 1

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>

Pantomimist

No, it's not what I want because it won't wrap items when there are more than 4. – Kisangani

Answer 2

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

Sarinasarine

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: jsfiddle.net/12ykmbt8 – Kisangani

Answer 3

"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>

Swimming

This emits 5 columns, while the UX requires that there are at most 4 columns. – Kisangani

@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". – Swimming

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. – Kisangani

Answer 4

I think what this needs is a variation on the technique used here:

https://www.billerickson.net/css-grid-center-last-item/

The example can centre a single item in a grid of two columns and the example works for the last item in the list, but can be adapted to work with more columns.

The trick is to use twice as many columns as needed and then use span to span each item over two columns. Thus the single item on its own starts in column 2 and spans into column 3.

I have successfully used it myself.

Prefabricate

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Meteorite