Xüsusiyyət place-items

place-items xüsusiyyəti sütun və sıraların eyni vaxtda düzülüşünü təyin edir, bu da istifadə etdiyimiz kodu əhəmiyyətli dərəcədə azaldır. Birinci dəyərlə elementin şaquli, ikinci dəyərlə isə üfüqi ox üzrə yerləşməsini təyin edirik. place-items xüsusiyyəti valideyn elementdə təyin olunur. place-items ilə işin yerinə yetirilməsini brauzerin debuggeri vasitəsilə izləmək rahatdır.

Sintaksis

cssselektor {
  place-items: üfüqi düzülüş dəyəri şaquli düzülüş dəyəri;
}

Nümunə . Şaquli oxun mərkəzi və üfüqi oxun başlanğıcı üzrə düzülüş

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

Результат:

Gəlin gridimizə brauzerin debuggeri vasitəsilə baxaq:

Nümunə . Şaquli oxun sonu və üfüqi oxun mərkəzi üzrə düzülüş

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

Результат:

İndi isə debugger panelinə nəzər salaq:

Nümunə . Şaquli oxun başlanğıcı və üfüqi oxun sonu üzrə düzülüş

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

Результат:

Gəlin brauzerin debuggeri vasitəsilə elementlərin xanalar içərisində düzülüşünə baxaq:

Həmçinin bax