CSS grid içindki öýjükleriň her iki ok boýunça düzmegiň gysgaltmasy

Gysgaltma aýratynlygy place-items ýardamynda grid öýjükleri içindki elementleri bir wagtda her iki ok boýunça düzmek bolýar. Aýratynlyk iki bahany kabul edýär, olar boşluk bilen bölünýär. Birkinji baha bilen biz elementüň şekili dikeline, ikinji bilen bolsa göni çyzyga görä kesgitläýäris. Aýratynlyk ata-elementde kesgitlenýär.

Geliň bu aýratynlygyň işini mysallar görkezeliň.

Dikiň merkezine we göni çyzygyň başyna görä

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

Результат:

Gridimiziň debuggerdaky görnüşine serediň:

Dikiň ahyryna we göni çyzygyň merkezine görä

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

Результат:

Gridimiziň debuggerdaky görnüşine serediň:

Dikiň başyna we göni çyzygyň ahyryna görä

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

Результат:

Gridimiziň debuggerdaky görnüşine serediň:

Amaly meseleler