Properti grid-column-start

Properti grid-column-start menentukan posisi awal elemen dalam grid atau jaringan menurut kolom. Nilai properti dapat berupa angka positif atau negatif. Jika kita memberikan angka positif, maka posisi awal elemen dihitung dari kiri ke kanan. Jika memberikan angka negatif, elemen akan ditempatkan dalam urutan terbalik, yaitu dari kanan ke kiri.

Sintaksis

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

Contoh

Mari kita tentukan posisi awal 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;
	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

Dan sekarang mari kita tentukan angka negatif pada properti 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

Dan sekarang dengan menggunakan properti grid-column-end, 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

Ketika kolom yang ditempati oleh elemen-elemen yang berdekatan tumpang tindih, setiap elemen berikutnya akan bergeser ke baris di bawahnya. Mari kita manfaatkan kemungkinan ini untuk membuat elemen pertama terletak di baris pertama, elemen kedua - di baris kedua, dan elemen ketiga serta keempat - menempati 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

properti grid-column-end,
yang menentukan posisi akhir elemen dalam grid menurut kolom
properti grid-column,
yang menentukan posisi awal dan akhir elemen dalam grid menurut 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