Item grid CSS lebar penuh menggunakan place-content: center

Question

Saya menggunakan place-content: center CSS Grid untuk memusatkan div secara menegak dan mendatar dalam bekas tetap, seperti ini:

.luar {
  kedudukan: tetap;
  sisipan: 0;
  latar belakang: hitam;
  paparan: grid;
  tempat-kandungan: pusat;
}
.dalaman {
  padding: 30px;
  latar belakang: putih;
  lebar: 100%;
  lebar maksimum: 500px;
}

<div class="outer">
<div class="inner">Sesetengah kandungan di sini</div>
</div>

Saya mahu div dalam menjadi lebar penuh, dengan lebar maksimum 500px, tetapi ia nampaknya tidak menghormati lebar: 100%

Bolehkah seseorang menerangkan mengapa ini berlaku dan bagaimana untuk membetulkannya, jika boleh mengekalkan pelaksanaan grid (saya tahu ada cara lain untuk memusatkan sesuatu seperti ini, tetapi kerana ingin tahu saya ingin mencuba memainkan peranan ini lebih penting daripada perkara lain)

Answer 1

Anda boleh menggunakan flex dan bukannya grid supaya anda boleh melakukan ini dengan mudah.

.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

Anda boleh menggunakan place-self，而不是使用 place-content pada item grid.

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