Jarak Antara Kolom dan Baris dalam Grid CSS

Dengan menggunakan properti gap Anda dapat secara bersamaan mengatur jarak antara kolom dan baris grid.

Anda dapat meneruskan satu nilai saja, atau dua nilai dipisahkan dengan spasi. Jika hanya satu nilai yang diteruskan, nilai tersebut mengatur jarak secara bersamaan antara kolom dan baris. Jika dua nilai diteruskan, maka nilai pertama mengatur jarak antara baris, dan nilai kedua - antara kolom.

Contoh

Mari atur jarak yang sama antara kolom 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 atur jarak yang berbeda antara kolom 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 Praktis

Buatlah sebuah grid di mana jarak antara kolom dan baris adalah 10px.

Buatlah sebuah grid di mana jarak antara kolom dan baris adalah 10px dan 5% secara berurutan.