CSS-Grid: How to center content without shrinking the item itself? [duplicate]

Question

Using CSS-Grid, I try to put my items in the center of a grid cell, without shrinking them completely to only the content. Is this possible?

I made a simple example on stackblitz. You can see that the items there don't fill the entire grid-cell with the background color. What is the proper way to get that working? I can remove the justify-items/align-items classes, but then the content isn't centered anymore.

https://stackblitz.com/edit/angular-8bggtq?file=app/app.component.html

Cells filled, but content not in center:

Cells not filled, but content is centered:

.wrapper {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  justify-items: center;
  align-items: center;
}

.item {
  //justify-self: stretch;
  //align-self: stretch;
}

.one {
  background: red;
}

.two {
  background: pink;
}

.three {
  background: violet;
}

.four {
  background: yellow;
}

.five {
  background: brown;
}

.six {
  background: green;
}

html,
body {
  margin: 0;
}

<div class="wrapper">
  <div class="item one">1</div>
  <div class="item two">2</div>
  <div class="item three">3</div>
  <div class="item four">4</div>
  <div class="item five">5</div>
  <div class="item six">6</div>
</div>

Answer 1

The HTML structure of a grid container has three levels:

• the container
• the items (the children of the container)
• the content (the grandchildren of the container and children of the items)

The problem you're having is that you're taking a two-level approach instead of the correct three-level approach. When you set align-items and justify-items on the container, they apply to the grid items, not to the content.

That's exactly what you are seeing: The grid items are being vertically and horizontally centered.

If you want to center the grid item children (the content), you need to specify that on the items. You can repeat on the items what you did on the container:

.item {
  display: grid;
  justify-items: center;
  align-items: center;
}

Or, if you don't need grid layout in the items, here's another simple method:

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

The above concepts apply to flex containers, as well.

For a more complete explanation and other centering methods see this post: Centering in CSS Grid

.wrapper {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

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

.one   { background: red;   }
.two   { background: pink;  }
.three { background: violet; }
.four  { background: yellow; }
.five  { background: brown; }
.six   { background: green; }
body   { margin: 0; }

<div class="wrapper">
  <div class="item one">1</div>
  <div class="item two">2</div>
  <div class="item three">3</div>
  <div class="item four">4</div>
  <div class="item five">5</div>
  <div class="item six">6</div>
</div>