place-items xususiyati

place-items xususiyati ustunlar va qatorlarning bir vaqtning o‘zida tekislanishini belgilab beradi, bu biz ishlatadigan kodni sezilarli darajada qisqartiradi. Birinchi qiymat bilan biz elementning vertikal o‘q bo‘yicha, ikkinchisi bilan esa gorizontal o‘q bo‘yicha joylashishini belgilaymiz. place-items xususiyati ota-elementda belgilanadi. place-items bilan ishlash jarayonini brauzerning debuggeri orqali kuzatish qulay.

Sintaksis

cssselector {
  place-items: gorizontal tekislash qiymati vertikal tekislash qiymati;
}

Misol . Vertikal o‘q markazi va gorizontal o‘q boshiga tekislash

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

Результат:

Keling, gridimizni brauzer debuggeri orqali ko‘rib chiqamiz:

Misol . Vertikal o‘q oxiri va gorizontal o‘q markaziga tekislash

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

Результат:

Endi esa debugger paneliga tashlaymiz ko‘zimizni:

Misol . Vertikal o‘q boshiga va gorizontal o‘q oxiriga tekislash

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

Результат:

Keling, brauzer debuggeri yordamida elementlarning kataklar ichidagi tekislanishini ko‘rib chiqamiz:

Shuningdek qarang