Egenskapen grid-column-start

Egenskapen grid-column-start anger startpositionen för ett element i ett grid eller rutnät längs kolumnaxeln. Egenskapsvärdet kan vara ett positivt eller negativt tal. Om vi anger ett positivt tal, räknas elementets startposition från vänster till höger. Om ett negativt tal anges placeras elementet i omvänd ordning, d.v.s. från höger till vänster.

Syntax

selector {
	grid-column-start: positivt eller negativt tal;
}

Exempel

Låt oss ange startpositioner 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;
	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;
}

Exempel

Och låt oss nu i egenskapen grid-column-start 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;
	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;
}

Exempel

Och låt oss nu med hjälp av egenskapen grid-column-end göra så att det första, andra och tredje elementet placeras på 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 ned en rad. Låt oss med hänsyn till denna möjlighet göra så att det första elementet placeras på första raden, det andra - på den andra, och det tredje och fjärde - tar upp 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;
}

Se även

egenskapen grid-column-end,
som anger slutpositionen för ett element i griddet längs kolumnaxeln
egenskapen grid-column,
som anger start- och slutposition för ett element i griddet längs kolumnaxeln
egenskapen grid-template-columns,
som anger antal och bredd på kolumner i griddet
egenskapen grid-auto-columns,
som anger antal och bredd på kolumner i ett implicit grid