Jarak Antara Lajur dan Baris dalam Grid CSS

Dengan menggunakan sifat gap anda boleh menetapkan jarak antara lajur dan baris grid secara serentak.

Sama ada satu nilai boleh dihantar, atau dua dipisahkan oleh ruang. Jika satu nilai dihantar, ia menetapkan jarak antara lajur dan baris secara serentak. Jika dua nilai dihantar, maka yang pertama menetapkan jarak antara baris, dan yang kedua - antara lajur.

Contoh

Mari tetapkan jarak yang sama antara lajur dan baris:

<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>9</div>
</div>

#parent {
	display: grid;
	gap: 10px;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	padding: 10px;
	border: 2px solid #696989;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Mari tetapkan jarak yang berbeza antara lajur dan baris:

<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>9</div>
</div>

#parent {
	display: grid;
	gap: 20px 10px;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	padding: 10px;
	border: 2px solid #696989;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Tugas Praktikal

Buatkan grid di mana jarak antara lajur dan baris ialah 10px.

Buatkan grid di mana jarak antara lajur dan baris ialah 10px dan 5% masing-masing.