Sifat grid-column

Sifat grid-column menentukan kedudukan awal dan akhir unsur dalam grid atau rangkaian mengikut lajur. Nilai sifat boleh berupa nombor positif atau negatif, dinyatakan melalui garis condong. Nombor pertama menandakan kedudukan awal unsur, nombor kedua - kedudukan akhir.

Jika nilai yang ditetapkan adalah nombor positif, kedudukan unsur dikira dari kiri ke kanan. Apabila nombor negatif dinyatakan, unsur akan disusun dalam susunan terbalik, iaitu dari kanan ke kiri.

Sintaks

pemilih {
	grid-column: kedudukan awal / kedudukan akhir;
}

Contoh

Mari kita tetapkan kedudukan awal dan akhir 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: 1 / 2;
}
#elem2 {
	grid-column: 1 / 3;
}
#elem3 {
	grid-column: 1 / 4;
}

Contoh

Sekarang mari kita nyatakan nombor negatif dalam sifat 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 supaya unsur pertama, kedua dan ketiga terletak di baris pertama. Dan unsur keempat menempati 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: 1 / 2;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 3 / 4;
}
#elem4 {
	grid-column: 1 / 4;
}

Contoh

Apabila lajur yang diduduki oleh unsur-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, unsur kedua - di baris kedua, dan unsur ketiga dan 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 sifat 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

Sekarang mari kita buat supaya blok pertama dan kelima menempati keseluruhan baris, blok kedua - dua baris dan dua lajur, dan blok ketiga dan keempat - satu baris dan dua lajur:

<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

sifat grid-row,
yang menentukan kedudukan awal dan akhir unsur dalam grid mengikut baris
sifat grid-column-start,
yang menentukan kedudukan awal unsur dalam grid mengikut lajur
sifat grid-column-end,
yang menentukan kedudukan akhir unsur dalam grid mengikut lajur
sifat grid-template-columns,
yang menentukan bilangan dan lebar lajur dalam grid
sifat grid-auto-columns,
yang menentukan bilangan dan lebar lajur dalam grid tersirat