Xüsusiyyət place-self

place-self xüsusiyyəti qriddə fərdi elementin şaquli və üfüqi oxlar üzrə düzülüşünü eyni anda təyin edir. Xüsusiyyətin qiymətində birinci nöqtə şaquli, ikinci nöqtə isə üfüqi ox üzrə düzülüşü göstərir. Bu xüsusiyyət düzülməsini istədiyimiz elementdə təyin olunur.

Sintaksis

csselement {
  place-self: şaquli üçün qiymət üfüqi üçün qiymət;
}

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

html<div id="parent">
  <div id="elem1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  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;
}
#elem1 {
  place-self: center start;
}

Результат:

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

html<div id="parent">
  <div id="elem1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  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;
}
#elem1 {
  place-self: start end;
}

Результат:

Nümunə . Şaquli oxun sonuna və üfüqi oxun mərkəzinə düzülüş

html<div id="parent">
  <div id="elem1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  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;
}
#elem1 {
  place-self: end center;
}

Результат:

Həmçinin bax