place-content: center を使用した全幅 CSS グリッド項目

Question

次のように、CSS グリッドの place-content:center を使用して、固定コンテナ内で div を垂直方向と水平方向の中央に配置しました。

.outer {
  位置: 固定;
  インセット: 0;
  背景: 黒;
  表示: グリッド;
  場所の内容: 中央;
}
.inner {
  パディング: 30px;
  背景: 白;
  幅: 100%;
  最大幅: 500ピクセル;
}

<div class="outer">
<div class="inner">一部のコンテンツはここにあります</div>
</div>

内部 div を全幅、最大幅 500px にしたいのですが、期待どおりに width: 100% 属性が尊重されないようです。

誰かがこれが起こる理由と、可能であればグリッドの実装を維持したまま修正する方法を説明してもらえますか（このようなものを中央に配置する他の方法があることは知っていますが、好奇心からこれを試してみたかったのです）違いを生むことはもっと重要です何よりも重要です!)

Answer 1

グリッドの代わりにフレックスを使用できるため、これを非常に簡単に行うことができます。

リーリー リーリー

Answer 2

place-content を使用する代わりに、グリッド アイテムで place-self を使用できます。

リーリー リーリー