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
selektor {
grid-template-rows: sıra eni;
}
Nümunə
Gəlin grid-də elementlərimiz üçün sıra enlərini təyin edək:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#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ə:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#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ə:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#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:
<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>
#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ə:
<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>
#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ə:
<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>
#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
-
grid-template-columnsxassəsi,
bu da grid-də sütunların sayını və enini təyin edir -
grid-auto-rowsxassəsi,
bu da gizli grid-də sıraların sayını və enini təyin edir
