Properti grid-column

Properti grid-column mengatur posisi awal dan akhir elemen dalam grid atau jaring berdasarkan kolom. Nilai properti dapat berupa angka positif atau negatif, yang ditentukan melalui garis miring. Angka pertama menunjukkan posisi awal elemen, angka kedua - posisi akhir.

Jika kita menetapkan angka positif sebagai nilai, maka posisi elemen dihitung dari kiri ke kanan. Jika menetapkan angka negatif, elemen akan ditempatkan dalam urutan terbalik, yaitu dari kanan ke kiri.

Sintaksis

selektor {
	grid-column: posisi awal / posisi akhir;
}

Contoh

Mari kita tetapkan posisi awal dan 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;
	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;
}

Contoh

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

Contoh

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

Contoh

Saat kolom yang ditempati oleh elemen-elemen yang berdekatan tumpang tindih, setiap elemen berikutnya akan bergeser ke baris di bawahnya. Mari kita gunakan 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: 1 / 4;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 1 / 2;
}
#elem4 {
	grid-column: 3 / 4;
}

Contoh

Mari gabungkan properti grid-column dan 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;
}

Contoh

Dan sekarang mari kita buat agar blok pertama dan kelima menempati seluruh baris, blok kedua - dua baris dan dua kolom, sedangkan blok ketiga dan keempat - satu baris dan dua kolom:

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

Lihat Juga

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