CSS Grid - How to center

Question

I have container with a lot of items inside.

How to center these items using GRID? It's set in 3 columns, how last 2 without 3th column be centered, because right now it's aligned left.

In CSS FlexBox it' easy: justify-content: center;

.container {
  background: blue;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.container__item span {
  background-color: red;
}

.container__item {
  text-align: center;
}

<div class="container">
  <div class="container__item">
    <span> 1 </span>
  </div>
  <div class="container__item">
    <span> 2 </span>
  </div>
  <div class="container__item">
    <span> 3 </span>
  </div>
  <div class="container__item">
    <span> 4 </span>
  </div>
  <div class="container__item">
    <span> 5 </span>
  </div>
  <div class="container__item">
    <span> 6 </span>
  </div>
  <div class="container__item">
    <span> 7 </span>
  </div>
  <div class="container__item">
    <span> 8 </span>
  </div>
  <div class="container__item">
    <span> 9 </span>
  </div>
  <div class="container__item">
    <span> 10 </span>
  </div>
  <div class="container__item">
    <span> 11 </span>
  </div>
</div>

*In CSS FlexBox it' easy:* --> you need to use flexbox because this is not a CSS grid job — Temani Afif, Nov 19 '20 at 12:23

score 0 · Answer 1 · answered Nov 19 '20 at 12:27

Flexbox would be a much easier and simple approach.

.container {
    background: blue;
            display: flex;
          justify-content: space-evenly;
          flex-wrap: wrap;
    }
    
    .container__item span {
            background-color: red;
    }
    
    .container__item {
     flex: 0 0 33.33%;
    }

<div class="container">
        <div class="container__item">
             <span> 1 </span>
        </div>
        <div class="container__item">
      <span> 2 </span>
        </div>
        <div class="container__item">
             <span> 3 </span>
        </div>
        <div class="container__item">
             <span> 4 </span>
        </div>
        <div class="container__item">
             <span> 5 </span>
        </div>
        <div class="container__item">
             <span> 6 </span>
        </div>
        <div class="container__item">
             <span> 7 </span>
        </div>
        <div class="container__item">
             <span> 8 </span>
        </div>
        <div class="container__item">
             <span> 9 </span>
        </div>
        <div class="container__item">
             <span> 10 </span>
        </div>
        <div class="container__item">
             <span> 11 </span>
        </div>
    </div>

Yes, it's easier using FlexBox. But this is Wordpress Elementor project and it's in Grid and dinamically loading post items ... — RS92, Nov 19 '20 at 12:38
If items are added dynamically, wouldn't centering the tail feel weird and "jumpy"? `___10___` → `__10_11__` → `10_11_12` — myf, Nov 19 '20 at 13:12

CSS Grid - How to center

1 Answers1