Proprietatea grid-column-end

Proprietatea grid-column-end definește poziția finală a elementului în grid sau grilă până la o anumită coloană. Valoarea proprietății poate fi un număr pozitiv sau negativ. Dacă setăm un număr pozitiv, atunci poziția finală 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.

Nuanța importantă a proprietății grid-column-end constă în faptul că numărul coloanei specificate nu este inclus în poziția finală a elementului - dacă setăm numărul 3, elementul va ocupa doar prima și a doua coloană.

Sintaxă

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

Exemplu

Să setăm elementelor din grid poziții finale:

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

#parent {
	display: grid;
	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: 1;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 4;
}

Exemplu

Acum, folosind proprietatea grid-column-start să 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ă folosim această particularitate pentru a face astfel încât primul element să se poziționeze pe primul rând, al doilea - pe al doilea, iar al treilea și al patrulea - pe 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;
}

Exemplu

Acum să specificăm în proprietatea grid-column-end numere negative:

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

#parent {
	display: grid;
	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: 1;
	grid-column-end: -3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: -2;
}

Vedeți și

proprietatea grid-column-start,
care definește poziția de început a elementului în grid pe coloane
proprietatea grid-column,
care definește pozițiile de început și de sfârșit ale elementului î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