Properti grid-column-end

Properti grid-column-end menentukan posisi akhir elemen dalam grid atau kisi hingga kolom tertentu. Nilai properti dapat berupa angka positif atau negatif. Jika kita memberikan angka positif, maka posisi akhir elemen dihitung dari kiri ke kanan. Saat menentukan angka negatif, elemen akan ditempatkan dalam urutan terbalik, yaitu dari kanan ke kiri.

Nuansa penting dari properti grid-column-end adalah bahwa nomor kolom yang ditentukan tidak termasuk dalam akhir posisi elemen - jika kita memberikan angka 3, maka elemen hanya akan menempati kolom pertama dan kedua.

Sintaksis

selektor {
	grid-column-end: angka positif atau negatif;
}

Contoh

Mari kita tentukan posisi akhir untuk elemen-elemen 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 properti grid-column-start mari kita buat agar elemen pertama, kedua, dan ketiga terletak di baris pertama. Dan elemen keempat menempati 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

Saat kolom yang ditempati oleh elemen-elemen tetangga tumpang tindih, setiap elemen berikutnya akan bergeser ke baris di bawahnya. Mari kita manfaatkan fitur ini untuk membuat elemen pertama terletak di baris pertama, elemen kedua - di baris kedua, dan elemen 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 tentukan angka negatif dalam properti 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

properti grid-column-start,
yang menentukan posisi awal elemen dalam grid berdasarkan kolom
properti grid-column,
yang menentukan posisi awal dan akhir elemen dalam grid berdasarkan kolom
properti grid-template-columns,
yang menentukan jumlah dan lebar kolom dalam grid
properti grid-auto-columns,
yang menentukan jumlah dan lebar kolom dalam grid implisit