Sifat grid-column-end

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

Nuansa penting sifat grid-column-end ialah nombor lajur yang dinyatakan tidak termasuk dalam kedudukan akhir unsur - jika kita menetapkan nombor 3, maka unsur hanya akan menduduki lajur pertama dan kedua.

Sintaks

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

Contoh

Mari kita tetapkan kedudukan akhir untuk 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;
	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;
}

Contoh

Sekarang dengan menggunakan sifat grid-column-start mari kita buat agar unsur pertama, kedua dan ketiga terletak di baris pertama. Dan unsur keempat menduduki keseluruhan 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 ciri ini untuk membuat unsur pertama terletak di baris pertama, kedua - di baris kedua, dan ketiga serta keempat - di 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;
}

Contoh

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

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

Lihat juga

sifat grid-column-start,
yang menetapkan kedudukan permulaan 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