Proprietatea grid-column-start

Proprietatea grid-column-start definește poziția de început a unui element în grid pe coloane. Valoarea proprietății poate fi un număr pozitiv sau negativ. Dacă specificăm un număr pozitiv, atunci poziția de început a elementului se numără de la stânga la dreapta. Când se specifică un număr negativ, elementul va fi poziționat în ordine inversă, adică de la dreapta la stânga.

Sintaxă

selector {
	grid-column-start: număr pozitiv sau negativ;
}

Exemplu

Să definim elementelor din grid pozițiile de început:

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

Exemplu

Și acum să specificăm în proprietatea grid-column-start numere negative:

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

Exemplu

Și acum cu ajutorul proprietății grid-column-end facem astfel încât primul, al doilea și al treilea element să se poziționeze pe primul rând. Iar al patrulea element să ocupe întregul al doilea rând:

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

Exemplu

La suprapunerea coloanelor ocupate de elementele învecinate, fiecare element ulterior se deplasează pe un rând mai jos. Să luăm în considerare această posibilitate și să facem astfel încât primul element să se poziționeze pe primul rând, al doilea - pe al doilea, iar al treilea și al patrulea - să ocupe al treilea rând:

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

Vezi și

proprietatea grid-column-end,
care definește poziția finală a unui element în grid pe coloane
proprietatea grid-column,
care definește pozițiile de început și de sfârșit ale unui element în grid pe coloane
proprietatea grid-template-columns,
care definește numărul și lățimea coloanelor în grid
proprietatea grid-auto-columns,
care definește numărul și lățimea coloanelor în gridul implicit