Propriété place-items

La propriété place-items définit simultanément l'alignement des colonnes et des rangées, ce qui réduit considérablement le code que nous utilisons. La première valeur définit le positionnement de l'élément sur l'axe vertical, et la seconde - sur l'axe horizontal. La propriété place-items est définie dans l'élément parent. Il est pratique de visualiser le fonctionnement de place-items via le débogueur du navigateur.

Syntaxe

csssélecteur {
  place-items: valeur d'alignement horizontal valeur d'alignement vertical;
}

Exemple . Alignement au centre de l'axe vertical et au début de l'axe horizontal

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  place-items: center start;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Examinons notre grille via le débogueur du navigateur :

Exemple . Alignement à la fin de l'axe vertical et au centre de l'axe horizontal

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  place-items: end center;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Et maintenant, jetons un œil dans le panneau du débogueur :

Exemple . Alignement au début de l'axe vertical et à la fin de l'axe horizontal

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  place-items: start end;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Examinons l'alignement des éléments dans les cellules à l'aide du débogueur du navigateur :

Voir aussi