Full width CSS grid item using place-content: center

I’m using CSS grid’s place-content: center to vertically and horizontally center a div in a fixed container, like so:

.outer {
  position: fixed;
  inset: 0;
  background: black;
  display: grid;
  place-content: center;
}
.inner {
  padding: 30px;
  background: white;
  width: 100%;
  max-width: 500px;
}

<div class="outer">
<div class="inner">Some content here</div>
</div>

I would like the inner div to be full width, with a maximum width of 500px but it doesn’t seem to respect the width: 100% property as I would expect.

Can someone explain why this is happening and how to resolve it, if possible keeping the grid implementation (I know there are alternatives to centering things like this but I’d like to try to get this method working, out of curiosity more than anything else!)

>Solution :

Instead of using place-items you can use place-self on the grid item.

.outer {
  position: fixed;
  inset: 0;
  background: black;
  display: grid;
}

.inner {
  padding: 30px;
  background: white;
  width: 100%;
  max-width: 500px;
  place-self: center;
}

<div class="outer">
  <div class="inner">Some content here</div>
</div>