Egenskapen grid-column-end

Egenskapen grid-column-end anger slutpositionen för ett element i ett grid eller ett nät fram till en specifik kolumn. Egenskapsvärdet kan vara ett positivt eller negativt tal. Om vi anger ett positivt tal, räknas slutpositionen för elementet från vänster till höger. Vid angivelse av ett negativt tal kommer elementet att placeras i omvänd ordning, d.v.s. från höger till vänster.

En viktig nyans med egenskapen grid-column-end är att numret på den angivna kolumnen inte ingår i slutpositionen för elementet - om vi anger talet 3, kommer elementet endast att uppta den första och andra kolumnen.

Syntax

selektor {
	grid-column-end: positivt eller negativt tal;
}

Exempel

Låt oss ange slutpositioner för elementen i griddet:

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

Exempel

Och nu med hjälp av egenskapen grid-column-start gör vi så att de första, andra och tredje elementen placeras på den första raden. Och det fjärde elementet tar upp hela den andra raden:

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

Exempel

När kolumnerna som upptas av intilliggande element överlappar, flyttas varje efterföljande element ner en rad. Låt oss använda denna egenskap för att göra så att det första elementet placeras på den första raden, det andra - på den andra, och det tredje och fjärde - på den tredje raden:

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

Exempel

Och låt oss nu i egenskapen grid-column-end ange negativa tal:

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

Se även

egenskapen grid-column-start,
som anger startpositionen för ett element i griddet efter kolumner
egenskapen grid-column,
som anger start- och slutpositioner för ett element i griddet efter kolumner
egenskapen grid-template-columns,
som anger antalet och bredden på kolumner i griddet
egenskapen grid-auto-columns,
som anger antalet och bredden på kolumner i ett implicit grid