Eienskap grid-column

Die eienskap grid-column spesifiseer die aanvangs- en eindposisie van 'n element in die rooster volgens kolomme. Die waardes van die eienskap kan positiewe of negatiewe getalle wees, geskei deur 'n skuinsstreep. Die eerste getal dui die aanvangsposisie van die element aan, die tweede - die eindposisie.

As ons 'n positiewe getal as waarde spesifiseer, word die posisie van die element van links na regs getel. Met 'n negatiewe getal sal die element in omgekeerde volgorde geplaas word, d.w.s. van regs na links.

Sintaksis

selektor {
	grid-column: aanvangsposisie / eindposisie;
}

Voorbeeld

Kom ons spesifiseer vir elemente in die rooster aanvangs- en eindposisies:

<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: 1 / 2;
}
#elem2 {
	grid-column: 1 / 3;
}
#elem3 {
	grid-column: 1 / 4;
}

Voorbeeld

En nou, kom ons spesifiseer negatiewe getalle in die eienskap grid-column:

<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: 1 / -2;
}
#elem2 {
	grid-column: 1 / -3;
}
#elem3 {
	grid-column: 1 / -4;
}

Voorbeeld

En nou maak ons dit so dat die eerste, tweede en derde elemente in die eerste ry geplaas word. En die vierde element die hele tweede ry beslaan:

<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: 1 / 2;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 3 / 4;
}
#elem4 {
	grid-column: 1 / 4;
}

Voorbeeld

Met die oorvleueling van kolomme wat deur aangrensende elemente beslaan word, skuif elke daaropvolgende element na 'n ry laer. Kom ons gebruik hierdie eienskap om die eerste element in die eerste ry te plaas, die tweede - in die tweede, en die derde en vierde - in die derde ry:

<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: 1 / 4;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 1 / 2;
}
#elem4 {
	grid-column: 3 / 4;
}

Voorbeeld

Kom ons kombineer die eienskappe grid-column en grid-row:

<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;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3;
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 1 / 2;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}

Voorbeeld

En nou, kom ons maak dit so dat die eerste en vyfde blokke die hele ry beslaan, en die tweede blok - twee rye en twee kolomme, en die derde en vierde blokke - een ry en twee kolomme:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
	<div id="elem5">5</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 2 / 4;
	grid-column: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}
#elem4 {
	grid-row: 3 / 3;
	grid-column: 2 / 4;
}
#elem5 {
	grid-row: 4 / 5;
	grid-column: 1 / 4;
}

Sien ook

die eienskap grid-row,
wat die aanvangs- en eindposisie van 'n element in die rooster volgens rye spesifiseer
die eienskap grid-column-start,
wat die aanvangsposisie van 'n element in die rooster volgens kolomme spesifiseer
die eienskap grid-column-end,
wat die eindposisie van 'n element in die rooster volgens kolomme spesifiseer
die eienskap grid-template-columns,
wat die aantal en breedte van kolomme in die rooster spesifiseer
die eienskap grid-auto-columns,
wat die aantal en breedte van kolomme in die implisiete rooster spesifiseer