grid-row-start xassəsi

grid-row-start xassəsi grid və ya şəbəkə daxilində elementin sətirlər üzrə başlanğıc 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 doğru sayılır. Mənfi ədəd göstərildikdə isə element əks qaydada yerləşəcək, yəni aşağıdan yuxarıya doğru.

Sintaksis

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

Nümunə

Gəlin grid daxilindəki elementlərə başlanğıc mövqelər 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;
}
#elem2 {
  grid-row-start: 2;
}
#elem3 {
  grid-row-start: 3;
}

Результат:

Nümunə

İndi isə grid-row-start xassəsində mənfi ədədlər göstərək. İndi elem3 ən üst sətri tutacaq, elem1 isə - ən aşağı sətri:

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;
}
#elem2 {
  grid-row-start: -2;
}
#elem3 {
  grid-row-start: -3;
}

Результат:

Nümunə

Gəlin birinci blokun iki sətir tutmasını təmin edək. Bunun üçün bizə grid-row-start və grid-row-end xassələrini birləşdirmək lazımdır:

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

Результат:

Həmçinin bax