CSS Gridda ustunlar va qatorlar orasidagi masofa

gap xususiyati yordamida gridning ustunlari va qatorlari orasidagi masofani bir vaqtning o'zida belgilash mumkin.

Bitta qiymat berilsa, u ustunlar va qatorlar orasidagi masofani bir vaqtning o'zida belgilaydi. Agar ikkita qiymat berilsa, birinchisi qatorlar orasidagi masofani, ikkinchisi esa ustunlar orasidagi masofani belgilaydi.

Misol

Keling, ustunlar va qatorlar orasida bir xil masofa belgilaymiz:

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

Misol

Keling, ustunlar va qatorlar orasida turlicha masofa belgilaymiz:

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

Amaliy vazifalar

Ustunlar va qatorlar orasidagi masofa 10px bo'lgan jadval yarating.

Ustunlar va qatorlar orasidagi masofa mos ravishda 10px va 5% bo'lgan jadval yarating.