Grid-template-columns xassəsi
grid-template-columns xassəsi
grid və ya şəbəkədə elementin tutacağı
sütunların sayını və enini təyin edir.
Xassə valideyn elementdə göstərilir və
övlad elementlərin sütunlarının enini müəyyən edir.
Xassənin qiymətində sütunların enini
istənilən ölçü vahidləri ilə göstəririk.
Xassələrdə piksel ilə qiymətlər göstərildikdə
sütunların ölçüləri tam olaraq onlara uyğun olacaq.
auto sözünü təyin etsək, sütunlar bütün
mövcud yeri dolduracaq.
fr (fraksiya) vahidinin istifadəsi
bütün fəzanın eyni hissələrə bölünəcəyi mənasını verir.
fr vahidinin üstünlüyü onun müxtəlif
konteynerlərə və ya ekran ölçülərinə uyğunlaşmasıdır,
çünki fr onları piksel ilə dəqiq ölçüyə
bağlamadan göstərilən sayda fraksiyaya bölür.
Sintaksis
selektor {
grid-template-columns: sütunun eni;
}
Nümunə
Gəlin grid-də elementlərimiz üçün sütunların enini 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-columns: 50px 100px 200px 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ütunlara piksel ilə sabit en təyin edək, ikinci sütun isə mövcud yeri avtomatik olaraq doldursun:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Nümunə
İndi isə grid-template-columns xassəsi ilə
belə edək ki, birinci və ikinci sütunlar
konteynerin bir hissəsini tutsun,
üçüncü sütun isə üç hissəni:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#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ütunun 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-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Nümunə
Gəlin grid-template-columns xassəsində
repeat() funksiyasını göstərək,
bu da konteynerə bütün üç sütunun 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-columns: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Nümunə
İndi gəlin əvvəlki nümunəni elə dəyişək ki, üç eyni sütuna dördüncü sütun da əlavə olunsun, və o, konteynerin iki fraksiyasını tutsun:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Nümunə
Gəlin ilk iki sütuna konteynerin bir fraksiyası eni təyin edək, son iki sütuna isə iki fraksiya eni 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-columns: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Nümunə
İndi gəlin sütunların enini təyin etmək üçün
repeat() funksiyası və sərbəst fr vahidlərini 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-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#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 enli sütunlarla dolduracaq:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#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ütunların eninin diapazonunu
minimumdan maksimum dəyərə qədər təyin edir.
Konteynerin eni bütün sütunları yerləşdirmirsə,
onların bəziləri yeni sətirə keçəcək, eyni zamanda sətirdəki sütunlar
orada bərabər paylanacaq. Gəlin əvvəlki nümunəni dəyişərək
ona minmax funksiyasını əlavə edək.
Sütunların müxtəlif yerləşmə variantlarını görmək üçün
brauzerinizin səhifəsinin enini dəyişin:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 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ütunları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-columns: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Nümunə
Həmçinin fr ilə yanaşı
% ilə qiymətlərdən istifadə etmək olar, bu da
sütunun konteynerin hansı hissəsini tutacağını müəyyən edir.
Eyni zamanda əvvəlcə sütunun ölçüsü
% ilə hesablanacaq, qalan sərbəst yer isə
fraksiyalara 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-columns: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 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 xanadan ibarət cədvəl yaradaq, üç sırada yerləşən.
Üstəlik, ikinci və üçüncü sıralar eyni enə malik olacaq,
hər bir sütun isə müxtəlif enə malik olacaq:
<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 fraksiya, birinci sütunun enini isə yarım fraksiya 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: 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-rowsxassəsi,
bu da grid-də sıraların sayını və enini təyin edir -
grid-auto-columnsxassəsi,
bu da gizli grid-də sütunların sayını və enini təyin edir
