Sifat grid-column-start

Sifat grid-column-start menetapkan kedudukan permulaan unsur dalam grid atau rangkaian mengikut lajur. Nilai sifat boleh menjadi nombor positif atau negatif. Jika kita menetapkan nombor positif, maka kedudukan permulaan unsur dikira dari kiri ke kanan. Apabila nombor negatif dinyatakan, unsur akan disusun dalam urutan terbalik, iaitu dari kanan ke kiri.

Sintaks

selector {
	grid-column-start: nombor positif atau negatif;
}

Contoh

Mari tetapkan kedudukan permulaan untuk unsur-unsur dalam grid:

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

Contoh

Sekarang mari kita nyatakan nombor negatif dalam sifat grid-column-start:

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

Contoh

Sekarang dengan menggunakan sifat grid-column-end, kita akan menjadikan unsur pertama, kedua dan ketiga terletak di baris pertama. Manakala unsur keempat akan menduduki seluruh baris kedua:

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

Contoh

Apabila lajur yang diduduki oleh unsur bersebelahan bertindih, setiap unsur seterusnya akan beralih ke baris di bawah. Mari kita gunakan kemungkinan ini untuk menjadikan unsur pertama terletak di baris pertama, unsur kedua - di baris kedua, manakala unsur ketiga dan keempat - menduduki baris ketiga:

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

Lihat juga

sifat grid-column-end,
yang menetapkan kedudukan akhir unsur dalam grid mengikut lajur
sifat grid-column,
yang menetapkan kedudukan permulaan dan akhir unsur dalam grid mengikut lajur
sifat grid-template-columns,
yang menetapkan bilangan dan lebar lajur dalam grid
sifat grid-auto-columns,
yang menetapkan bilangan dan lebar lajur dalam grid tersirat