CSS Grid: how to center grid items on a 6 columns row?

Question

I've been asked by a client to add a "key figures" section on a website, where there can only be a maximum of 6 key figures per row (there can be more because the website is hooked to a CMS)

So what I used for that is a CSS Grid:

* {
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(6, max-content);
  justify-content: center;
  gap: 3rem;
  margin: 3rem auto;
}

.item {
  height: 5rem;
  width: 5rem;
}

<div class="container">
  <div class="item">
    <h2>400+</h2>
    <p>Lorem ipsum</p>
  </div>

  <div class="item">
    <h2>400+</h2>
    <p>Lorem ipsum</p>
  </div>

  <div class="item">
    <h2>400+</h2>
    <p>Lorem ipsum</p>
  </div>
  <div class="item">
    <h2>400+</h2>
    <p>Lorem ipsum</p>
  </div>

  <div class="item">
    <h2>400+</h2>
    <p>Lorem ipsum</p>
  </div>

  <div class="item">
    <h2>400+</h2>
    <p>Lorem ipsum</p>
  </div>

  <div class="item">
    <h2>400+</h2>
    <p>Lorem ipsum</p>
  </div>

  <div class="item">
    <h2>400+</h2>
    <p>Lorem ipsum</p>
  </div>
</div>

But the client also asked that if there are less or more than 6 key figures, the items should be centered and not to the left, like:

If 3 key figures are provided:

   X X X

If 8 key figures are provided:

X X X X X X 
    X X

If 11 key figures are provided:

X X X X X X
 X X X X X

And so on

How can I achieve that ? How can I have a 6 columns row with items centered if less or more than 6 items are in the grid?

Css-grid can't do that dynamically. Flexbox can however – Paulie_D Jun 06 '22 at 12:36 — Paulie_D, Jun 06 '22 at 12:36

Usama · Answer 1 · 2022-06-06T12:42:10.967

The only way that I've got it to work so far is by displaying it flex and not a grid See snippet

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<style>
  * {
  margin: 0;
}

.container {
  display: flex;
  grid-template-columns: repeat(6, max-content);
  justify-content: center;
  align-items: center;
  gap: 3rem;
  margin: 3rem auto;
}

.item {
  height: 5rem;
  width: 5rem;
}
.container2{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

</head>
<body>
  <div class="container">
    <div class="item">
      <h2>400+</h2>
      <p>Lorem ipsum</p>
    </div>
  
    <div class="item">
      <h2>400+</h2>
      <p>Lorem ipsum</p>
    </div>
  
    <div class="item">
      <h2>400+</h2>
      <p>Lorem ipsum</p>
    </div>
    <div class="item">
      <h2>400+</h2>
      <p>Lorem ipsum</p>
    </div>
  
    <div class="item">
      <h2>400+</h2>
      <p>Lorem ipsum</p>
    </div>
  
    <div class="item">
      <h2>400+</h2>
      <p>Lorem ipsum</p>
    </div>
  </div>
  <div class="container2">
    <div class="item">
      <h2>400+</h2>
      <p>Lorem ipsum</p>
    </div>
  
    <div class="item">
      <h2>400+</h2>
      <p>Lorem ipsum</p>
    </div>
    <div class="item">
      <h2>400+</h2>
      <p>Lorem ipsum</p>
    </div>
    <div class="item">
      <h2>400+</h2>
      <p>Lorem ipsum</p>
    </div>
  </div>  
</body>
</html>

CSS Grid: how to center grid items on a 6 columns row?

1 Answers1