CSS Grid'de Sütun ve Satır Arası Boşluklar

gap özelliği kullanılarak grid'in sütunları ve satırları arasındaki boşluk aynı anda ayarlanabilir.

Ya tek bir değer verilebilir, ya da iki değer boşlukla ayrılarak verilebilir. Tek bir değer verilirse, bu değer hem sütunlar hem de satırlar arasındaki boşluğu aynı anda belirler. İki değer verilirse, ilk değer satırlar arasındaki boşluğu, ikincisi ise sütunlar arasındaki boşluğu belirler.

Örnek

Sütunlar ve satırlar arasında aynı boşluğu ayarlayalım:

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

Örnek

Sütunlar ve satırlar arasında farklı boşluklar ayarlayalım:

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

Pratik Görevler

Sütunlar ve satırlar arasındaki boşluğun 10px olduğu bir tablo oluşturun.

Sütunlar ve satırlar arasındaki boşluğun sırasıyla 10px ve 5% olduğu bir tablo oluşturun.