Center grid div without items get centered

Question

Here are my code snippets:

.grades_dashboard_m {}

.three_separation {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 60px;
}

.grades_dashboard_box {
  height: 130px;
  width: 160px;
  background-color: #000000;
  color: #ffff;
}

<div class="grades_dashboard_m" id="co_1">
  <div class="three_separation">
    <div class='grades_dashboard_box'>
      <h1>12</h1>
    </div>

    <div class='grades_dashboard_box'>
      <h1>12</h1>
    </div>

    <div class='grades_dashboard_box'>
      <h1>12</h1>
    </div>
  </div>
</div>

As you see the grid div (grades_dashboard_m) is not centered in grades_dashboard_m. How to center it without center the elements in grades_dashboard_m? I already tried this:

.grades_dashboard_m {
  display:flex;
  justify-content:center;
  align-items:center;
}

But without success.

EDIT: I figured out that this is not the problem. The problem is that the content of the 3 grids is not centered. But how to center the content of the grids?

Please have a look at my solution as it directly answers your question using a grid-based property. — Andy Hoffman, Mar 30 '19 at 07:32
[Centering in CSS Grid](https://stackoverflow.com/questions/45536537/centering-in-css-grid) — Michael Benjamin, Mar 30 '19 at 14:23

score 1 · Accepted Answer · answered Mar 30 '19 at 07:23

1

Simply apply margin: 0 auto; to .grades_dashboard_box likr this

.grades_dashboard_box {
  margin: 0 auto;
}

this shall center the element not text.

answered Mar 30 '19 at 07:23

Joykal Infotech

1,840
3
9
17

Andy Hoffman · Answer 2 · 2019-03-30T07:40:24.347

Pure, CSS Grid Solution

In short, don't use margin: 0 auto to center grid children—use justify-items: center.

.three_separation {
  …
  justify-items: center;
}

A few words about justify-items from MDN:

In grid layouts, it aligns the items inside their grid areas on the inline axis

Demo

.grades_dashboard_m {}

.three_separation {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 60px;
  justify-items: center;  /* <-- Added */
}

.grades_dashboard_box {
  height: 130px;
  width: 160px;
  background-color: #000000;
  color: #ffff;
}

<div class="grades_dashboard_m" id="co_1">
  <div class="three_separation">
    <div class='grades_dashboard_box'>
      <h1>12</h1>
    </div>

    <div class='grades_dashboard_box'>
      <h1>12</h1>
    </div>

    <div class='grades_dashboard_box'>
      <h1>12</h1>
    </div>
  </div>
</div>

@FilipDegenhart this is the *grid* way, using *margins* also works :) — kukkuz, Mar 30 '19 at 08:45

Center grid div without items get centered

2 Answers2

Pure, CSS Grid Solution

Demo