Bilangan dan Lebar Lajur dalam Grid CSS

Pengenalan kepada kerja dengan grid kita akan mulakan dengan menetapkan bilangan dan lebar lajur, di mana elemen anak akan ditempatkan. Untuk tujuan ini, kita akan menggunakan sifat grid-template-columns, yang dinyatakan dalam elemen induk dan menetapkan bilangan dan lebar lajur, yang akan diisi oleh elemen anak dalam grid. Dalam nilai sifat, kita nyatakan lebar lajur dalam piksel.

Contoh

Mari kita mula-mula buat elemen induk dan jadikannya bekas grid. Katakan kita ada div, yang mengandungi empat elemen anak. Mari kita tetapkan untuknya dalam sifat display nilai grid, dan dalam sifat grid-template-columns tulis lebar untuk dua lajur:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 200px 400px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Sekarang mari kita buat jadual dengan empat lajur berbeza saiz:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50px 100px 200px 250px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Tugas Amali

Katakan anda mempunyai div dengan sembilan elemen anak. Jadikan elemen induk sebagai bekas grid.

Tempatkan elemen anak dalam dua lajur dengan lebar 200px.

Tempatkan elemen anak dalam tiga lajur dengan lebar 150px.

Tempatkan elemen anak dalam tiga lajur: pertama selebar 100px, kedua 150px, dan ketiga 200px.