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ə.