Full-width CSS grid items using place-content: center

Question

I used CSS Grid's place-content: center to center the div vertically and horizontally in the fixed container, like this:

.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 want the inner div to be full width, with a max-width of 500px, but it doesn't seem to respect the width: 100% attribute as I expect.

Can someone explain why this happens and how to fix it, if possible keeping the grid implementation (I know there are other ways to center something like this, but out of curiosity I wanted to try making this Making a difference is more important than anything else!)

Answer 1

You can use flex instead of grid so you can do this very easily.

.outer {
  position: fixed;
  width: 100%;
  height: 100%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  padding: 30px;
  background: white;
  width: 100%;
}

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

Answer 2

Instead of using place-content, you can use place-self on grid items.

.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>