CSS Grid-də Sütunların Sayı və Eni
Grid ilə işləməyə tanışlığı
biz sütunların sayını və enini təyin etməklə
başlayacayıq, bunların üzərində
uşaq elementlər yerləşdiriləcək.
Bu məqsədlə biz
grid-template-columns xüsusiyyətindən istifadə edəcəyik, hansı ki
valideyn elementdə göstərilir və
grid-də uşaq elementlərin tutacağı
sütunların sayını və enini təyin edir.
Xüsusiyyətin dəyərində sütunların enini
piksel ilə göstəririk.
Nümunə
Gəlin əvvəlcə valideyn element yaradaq
və onu grid konteynerinə çevirək.
Tutaq ki, bizim içində dörd uşaq element yerləşən
div var. Onun üçün
display xüsusiyyətində grid dəyərini təyin edək,
grid-template-columns xüsusiyyətində isə
iki sütunun enini yazaq:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 200px 400px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Nümunə
İndi gəlin dörd müxtəlif ölçüdə sütunu olan bir cədvəl yaradaq:
<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>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 250px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Praktiki Tapşırıqlar
Tutaq ki, sizin doqquz uşaq elementi olan bir div-iniz var. Valideyn elementi grid konteynerinə çevirin.
Uşaq elementləri hər biri 200px enində olan iki
sütunda yerləşdirin.
Uşaq elementləri hər biri 150px enində olan üç
sütunda yerləşdirin.
Uşaq elementləri üç sütunda yerləşdirin:
birincisi 100px enində,
ikincisi 150px enində, üçüncüsü isə
200px enində.