Afkorting vir belyning binne selle op albei asse in CSS-rooster

Met behulp van die verkorte eienskap place-items kan jy elemente gelyktydig binne roosterselle op albei asse belyn. Die eienskap aanvaar twee waardes, geskei deur 'n spasie. Met die eerste waarde stel ons die plasing van die element op die vertikale as, en met die tweede - op die horisontale as. Die eienskap word in die ouerelement gestel.

Kom ons kyk na die werking van hierdie eienskap met voorbeelde.

Sentraal op vertikale en begin van horisontale

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;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Kom ons kyk na ons rooster in die ontfoutingsgeredskap:

Einde van vertikale en sentraal op horisontale

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;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Kom ons kyk na ons rooster in die ontfoutingsgeredskap:

Begin van vertikale en einde van horisontale

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;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Kom ons kyk na ons rooster in die ontfoutingsgeredskap:

Praktiese take