Lastnost grid-column-start

Lastnost grid-column-start določa začetni položaj elementa v mreži po stolpcih. Vrednost lastnosti je lahko pozitivno ali negativno število. Če podamo pozitivno število, se začetni položaj elementa šteje od leve proti desni. Če podamo negativno število, se element postavi v obratnem vrstnem redu, t.j. od desne proti levi.

Sintaksa

selektor {
	grid-column-start: pozitivno ali negativno število;
}

Primer

Določimo elementom v mreži začetne položaje:

<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;
}

Primer

Zdaj pa v lastnosti grid-column-start navedimo negativna števila:

<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;
}

Primer

Zdaj s pomočjo lastnosti grid-column-end poskrbimo, da se prvi, drugi in tretji element postavijo v prvo vrstico. Četrti element pa naj zavzame celotno drugo vrstico:

<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;
}

Primer

Pri prekrivanju stolpcev, ki jih zasedajo sosednji elementi, se vsak naslednji element premakne v nižjo vrstico. Uporabimo to možnost in poskrbimo, da se prvi element postavi v prvo vrstico, drugi - v drugo, tretji in četrti pa naj zasedeta tretjo vrstico:

<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;
}

Glejte tudi

lastnost grid-column-end,
ki določa končni položaj elementa v mreži po stolpcih
lastnost grid-column,
ki določa začetni in končni položaj elementa v mreži po stolpcih
lastnost grid-template-columns,
ki določa število in širino stolpcev v mreži
lastnost grid-auto-columns,
ki določa število in širino stolpcev v implicitni mreži