grid-row-end xassəsi

grid-row-end xassəsi grid və ya şəbəkə daxilində elementin sıralar üzrə bitmə mövqeyini təyin edir. Xassənin qiyməti müsbət və ya mənfi ədəd ola bilər. Əgər müsbət ədəd təyin etsək, onda elementin başlanğıc mövqeyi yuxarıdan aşağıya sayılır. Mənfi ədəd göstərildikdə element əks qaydada yerləşəcək, yəni aşağıdan yuxarıya.

Sintaksis

cssselektor {
  grid-row-end: müsbət və ya mənfi ədəd;
}

Nümunə

Gəlin grid daxilindəki elementlərə bitmə mövqeləri təyin edək:

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

css#parent {
  display: grid;
  padding: 10px;
  width: 400px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row-start: 1;
  grid-row-end: 2;
}
#elem2 {
  grid-row-start: 2;
  grid-row-end: 3;
}
#elem3 {
  grid-row-start: 3;
  grid-row-end: 4;
}

Результат:

Nümunə

Gəlin birinci blokun iki sıra tutmasını təmin edək:

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

css#parent {
  display: grid;
  grid-template-columns: 2fr 1fr;
  height: 300px;
  width: 400px;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row-start: 1;
  grid-row-end: 3;
}
#elem2 {
  grid-row-start: 1;
  grid-row-end: 2;
}
#elem3 {
  grid-row-start: 2;
  grid-row-end: 3;
}

Результат:

Nümunə

İndi gəlin dördüncü bloka üç sıra təyin edək:

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

css#parent {
  display: grid;
  grid-template-columns: 2fr 1fr;
  height: 300px;
  width: 400px;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row-start: 1;
  grid-row-end: 2;
}
#elem2 {
  grid-row-start: 2;
  grid-row-end: 3;
}
#elem3 {
  grid-row-start: 3;
  grid-row-end: 4;
}
#elem4 {
  grid-row-start: 1;
  grid-row-end: 4;
}

Результат:

Nümunə

İndi gəlin grid-row-start və grid-row-end xassələrində mənfi ədədlər göstərək. İndi elem3 ən yuxarı sıranı, elem1 isə - ən aşağı sıranı tutacaq:

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

css#parent {
  display: grid;
  padding: 10px;
  width: 400px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row-start: -1;
  grid-row-end: -2;
}
#elem2 {
  grid-row-start: -2;
  grid-row-end: -3;
}
#elem3 {
  grid-row-start: -3;
  grid-row-end: -4;
}

Результат:

Həmçinin bax