Grid-column xassəsi

grid-column xassəsi grid və ya şəbəkədə elementin sütunlar üzrə baslangıc ve son mövqelərini təyin edir. Xassənin dəyərləri slash ilə ayrılmıs müsbət və ya mənfi ədədlər ola bilər. Birinci ədəd elementin baslangıc mövqeyini, ikinci ədəd isə son mövqeyini göstərir.

Əgər dəyər kimi müsbət ədəd təyin etsək, onda elementin mövqeyi soldan sağa doğru hesablanır. Mənfi ədəd göstərildikdə element əks qaydada yerləşəcək, yəni sağdan sola doğru.

Sintaksis

selektor {
	grid-column: baslangıc mövqeyi / son mövqeyi;
}

Nümunə

Gəlin grid daxilindəki elementlərə baslangıc ve son mövqelər təyin edək:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 2;
}
#elem2 {
	grid-column: 1 / 3;
}
#elem3 {
	grid-column: 1 / 4;
}

Nümunə

İndi isə grid-column xassəsində mənfi ədədlər göstərək:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / -2;
}
#elem2 {
	grid-column: 1 / -3;
}
#elem3 {
	grid-column: 1 / -4;
}

Nümunə

İndi isə edək ki, birinci, ikinci ve üçüncü elementlər birinci sırada yerləşsin. Dördüncü element isə bütün ikinci sıranı tutsun:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 2;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 3 / 4;
}
#elem4 {
	grid-column: 1 / 4;
}

Nümunə

Qonşu elementlər tərəfindən tutulan sütunların üst-üstə düşməsi zamanı, hər bir sonrakı element bir sıra aşağıya doğru sürüşür. Gəlin bu xüsusiyyətdən istifadə edərək edək ki, birinci element birinci sırada, ikinci - ikinci sırada, üçüncü ve dördüncü elementlər isə üçüncü sırada yerləşsin:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 4;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 1 / 2;
}
#elem4 {
	grid-column: 3 / 4;
}

Nümunə

grid-column ve grid-row xassələrini birləşdirək:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3;
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 1 / 2;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}

Nümunə

İndi isə edək ki, birinci ve beşinci bloklar bütün sıranı tutsun, ikinci blok isə iki sıra ve iki sütun, üçüncü ve dördüncü bloklar isə bir sıra ve iki sütun tutsun:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
	<div id="elem5">5</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 2 / 4;
	grid-column: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}
#elem4 {
	grid-row: 3 / 3;
	grid-column: 2 / 4;
}
#elem5 {
	grid-row: 4 / 5;
	grid-column: 1 / 4;
}

Həmçinin bax

grid-row xassəsi,
bu xassə grid daxilində elementin sıralar üzrə baslangıc ve son mövqelərini təyin edir
grid-column-start xassəsi,
bu xassə grid daxilində elementin sütunlar üzrə baslangıc mövqeyini təyin edir
grid-column-end xassəsi,
bu xassə grid daxilində elementin sütunlar üzrə son mövqeyini təyin edir
grid-template-columns xassəsi,
bu xassə grid daxilində sütunların sayını ve enini təyin edir
grid-auto-columns xassəsi,
bu xassə gizli grid daxilində sütunların sayını ve enini təyin edir