Grid-template-rows xassəsi

grid-template-rows xassəsi grid və ya şəbəkədə elementin tutacağı sıraların sayını və enini təyin edir. Xassənin qiymətində sıraların enini istənilən ölçü vahidləri ilə göstəririk. Xassə valideyn elementdə göstərilir və övlad elementlərin sıra enlərini müəyyən edir.

Xassələrdə piksel ilə qiymətlər göstərildikdə sıra ölçüləri tam olaraq onlara uyğun olacaq. auto sözünü təyin etsək, sıralar bütün mövcud yeri dolduracaq. fr vahidinin (hissə) istifadəsi bütün fəzanın eyni hissələrə bölünəcəyi mənasını verir. fr-nın üstünlüyü onun müxtəlif konteynerlərə və ya ekran ölçülərinə uyğunlaşma qabiliyyətidir, çünki fr onları piksel ilə dəqiq ölçüdən asılı olmayaraq göstərilən sayda hissəyə bölür.

Sintaksis

cssselektor {
  grid-template-rows: sıra eni;
}

Nümunə

Gəlin grid-də elementlərimiz üçün sıra enlərini təyin edək:

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

css#parent {
  display: grid;
  grid-template-rows: 50px 100px 50px 50px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Nümunə

Gəlin birinci və üçüncü sıraya piksel ilə sabit en təyin edək, ikinci sıra isə avtomatik olaraq mövcud yeri doldursun:

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

css#parent {
  display: grid;
  grid-template-rows: 100px auto 60px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Nümunə

İndi isə grid-template-rows xassəsi ilə elə edək ki, birinci və ikinci sıralar konteynerin bir hissəsini tutsun, üçüncü sıra isə üç hissə:

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

css#parent {
  display: grid;
  grid-template-rows: 1fr 1fr 3fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Nümunə

fr vahidlərində göstərilən qiymətlər kəsr şəklində ola bilər. Gəlin əvvəlki nümunəni dəyişərək, ikinci və üçüncü sıraların enini kəsr ədədlərində göstərək:

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

css#parent {
  display: grid;
  grid-template-rows: 1fr 0.5fr 2.5fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Nümunə

Gəlin grid-template-rows xassəsində repeat() funksiyasını göstərək, bu da konteynerə bütün üç sıranın eyni enə malik olması lazım olduğunu bildirəcək:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Nümunə

İndi gəlin əvvəlki nümunəni dəyişərək elə edək ki, üç eyni sıraya konteynerin iki hissəsini tutan dördüncü sıra da əlavə olunsun:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(3, 1fr) 2fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Nümunə

Gəlin ilk iki sıraya konteynerin bir hissəsi en təyin edək, son iki sıraya isə iki hissə:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Nümunə

İndi gəlin sıra enlərini təyin edərkən repeat() funksiyası və sərbəst fr vahidləri ilə göstərilən qiymətləri birləşdirək:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 300px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Nümunə

Həmçinin repeat() funksiyasında auto-fill qiymətini göstərmək olar, bu da konteynerimizi eyni enə malik lazımi sıralarla dolduracaq:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fill, 50px);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Nümunə

auto-fill ilə birlikdə minmax funksiyasını göstərmək çox rahatdır, bu funksiya sıra enləri üçün minimaldan maksimala qədər olan diapazonu təyin edir. Konteynerin eni bütün sıraları yerləşdirmirsə, onların bəziləri yeni sətirə keçəcək, eyni zamanda sətirdəki sıralar ora bərabər şəkildə paylanacaq. Gəlin əvvəlki nümunəni dəyişərək, ona minmax funksiyasını əlavə edək:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Nümunə

İndi gəlin auto-fit xassəsini göstərək, onun auto-fill-dən fərqi ondadır ki, o, sıraların sayını konteynerin mövcud eninə uyğunlaşdırır, onları genişləndirir və ya sıxır:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Nümunə

fr ilə yanaşı % ilə qiymətlərdən də istifadə etmək olar, bunlar da sıranın konteynerin hansı hissəsini tutacağını müəyyən edir. Eyni zamanda əvvəlcə sıranın ölçüsü % ilə hesablanacaq, qalan sərbəst yer isə hissələrə bölünəcək:

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

css#parent {
  display: grid;
  grid-template-rows: 50% 1fr 2fr 30%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Nümunə

Gəlin birlikdə grid-template-columns və grid-template-rows xassələrindən istifadə edək:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Nümunə

Gəlin grid-template-columns və grid-template-rows xassələri ilə doqquz xana olan cədvəl yaradaq, yerləşən üç sırada. Üstəlik ikinci və üçüncü sıra eyni enə malik olacaq, hər bir sütun isə müxtəlif enə:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 60px 1fr 60px;
  grid-template-columns: 20% 1fr 15%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Nümunə

İndi əvvəlki nümunədəki cədvəldə yuxarı sıranın enini iki hissə etək, ilk sütunu isə yarım hissə:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 2fr 1fr 1fr;
  grid-template-columns: 0.5fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Həmçinin bax