Éléments de grille CSS pleine largeur utilisant place-content : center

Question

J'ai utilisé place-content: center de CSS Grid pour centrer le div verticalement et horizontalement dans le conteneur fixe, comme ceci :

.outer {
  poste : fixe ;
  encart : 0 ;
  fond : noir ;
  affichage : grille ;
  contenu du lieu : centre ;
}
.intérieur {
  remplissage : 30 px ;
  fond : blanc ;
  largeur : 100 % ;
  largeur maximale : 500 px ;
}</pré>
<pre class="brush:html;toolbar:false;"><div class="outer">
<div class="inner">Quelques contenus ici</div>
</div>

Je veux que le div interne soit pleine largeur, avec une largeur maximale de 500 px, mais il ne semble pas respecter la propriété width: 100%

Quelqu'un peut-il expliquer pourquoi cela se produit et comment y remédier, si possible en conservant l'implémentation de la grille (je sais qu'il existe d'autres façons de centrer quelque chose comme ça, mais par curiosité, je voulais essayer de faire en sorte que cela joue un rôle est plus plus important que toute autre chose)

Answer 1

Vous pouvez utiliser flex au lieu de grille pour pouvoir le faire très facilement.

.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

Vous pouvez utiliser place-self，而不是使用 place-content sur les éléments de la grille.

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