Lühend lahtrite sees mõlema telje suunas joondamiseks CSS gridis

Lühendatud omadust place-items saab kasutada elementide joondamiseks gridi lahtrite sees samaaegselt mõlemas teljes. Omadus võtab kaks väärtust, mis on eraldatud tühikuga. Esimese väärtusega määrame elemendi asukoha vertikaalsel ja teise horisontaalsel teljel. Omadus määratakse vanem-elemendis.

Vaatame selle omaduse tööd näidete varal.

Vertikaalselt keskele ja horisontaalselt algusesse

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;
}

Результат:

Vaadakem oma gridi veaotsijas:

Vertikaalselt lõppu ja horisontaalselt keskele

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;
}

Результат:

Vaadakem oma gridi veaotsijas:

Vertikaalselt algusesse ja horisontaalselt lõppu

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;
}

Результат:

Vaadakem oma gridi veaotsijas:

Praktilised ülesanded