Grid-column-start xassəsi

grid-column-start xassəsi griddə və ya şəbəkədə elementin sutunlar uzrə baslangic movqeyini təyin edir. Xassənin qiyməti müsbət və ya mənfi ədəd ola bilər. Müsbət ədəd təyin etdikdə, elementin baslangic movqeyi soldan sağa hesablanır. Mənfi ədəd göstərildikdə element əks qaydada yerləşəcək, yəni sağdan sola.

Sintaksis

selektor {
	grid-column-start: müsbət və ya mənfi ədəd;
}

Nümunə

Gəlin griddəki elementlərə baslangic movqeləri 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-start: 1;
}
#elem2 {
	grid-column-start: 2;
}
#elem3 {
	grid-column-start: 3;
}

Nümunə

İndi gəlin grid-column-start 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-start: -1;
}
#elem2 {
	grid-column-start: -2;
}
#elem3 {
	grid-column-start: -3;
}

Nümunə

İndi isə grid-column-end xassəsindən istifadə edərək birinci, ikinci və üçüncü elementlərin birinci sırada yerləşməsini təmin edək. 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-start: 1;
	grid-column-end: 2;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 3;
	grid-column-end: 4;
}
#elem4 {
	grid-column-start: 1;
	grid-column-end: 4;
}

Nümunə

Qonşu elementlərin tutduğu sutunların üst-üstə düşməsi zamanı hər bir sonrakı element bir sıra aşağı sürüşür. Gəlin bu imkandan istifadə edərək birinci elementin birinci sırada, ikinci - ikinci sırada, üçüncü və dördüncünün isə üçüncü sıranı tutmasını təmin edə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;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: 1;
	grid-column-end: 4;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem4 {
	grid-column-start: 3;
	grid-column-end: 4;
}

Həmçinin bax

grid-column-end xassəsi,
griddə elementin sutunlar uzrə bitmə movqeyini təyin edir
grid-column xassəsi,
griddə elementin sutunlar uzrə baslangic və bitmə movqelərini təyin edir
grid-template-columns xassəsi,
griddə sutunların sayını və enini təyin edir
grid-auto-columns xassəsi,
örtülü griddə sutunların sayını və enini təyin edir