Vlastnost grid-column-start

Vlastnost grid-column-start nastavuje počáteční pozici prvku v gridu nebo síti podle sloupců. Hodnotou vlastnosti může být kladné nebo záporné číslo. Pokud zadáme kladné číslo, počáteční pozice prvku se počítá zleva doprava. Při zadání záporného čísla se prvek umístí v opačném pořadí, tj. zprava doleva.

Syntaxe

selektor {
	grid-column-start: kladné nebo záporné číslo;
}

Příklad

Nastavme prvkům v gridu počáteční pozice:

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

Příklad

A nyní ve vlastnosti grid-column-start zadejme záporná čísla:

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

Příklad

A nyní pomocí vlastnosti grid-column-end udělejme, aby první, druhý a třetí prvek byly umístěny v první řadě. A čtvrtý prvek zabíral celou druhou řadu:

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

Příklad

Při překrytí sloupců, které zabírají sousední prvky, se každý následující prvek posune o řadu níže. S ohledem na tuto možnost udělejme tak, aby se první prvek umístil v první řadě, druhý - ve druhé, a třetí a čtvrtý - zabrali třetí řadu:

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

Viz také

vlastnost grid-column-end,
která nastavuje koncovou pozici prvku v gridu podle sloupců
vlastnost grid-column,
která nastavuje počáteční a koncovou pozici prvku v gridu podle sloupců
vlastnost grid-template-columns,
která nastavuje počet a šířku sloupců v gridu
vlastnost grid-auto-columns,
která nastavuje počet a šířku sloupců v implicitním gridu