მანძილი სვეტებსა და რიგებს შორის CSS ღრიდებში

gap თვისების საშუალებით შესაძლებელია ერთდროულად დაფიქსირდეს მანძილი ღრიდის სვეტებსა და რიგებს შორის.

შესაძლებელია გადაეცეს ან ერთი მნიშვნელობა, ან ორი მნიშვნელობა სფეისით გამოყოფილი. თუ გადაცემულია ერთი მნიშვნელობა, ის ერთდროულად ადგენს მანძილს სვეტებსა და რიგებს შორის. თუ კი გადაცემულია ორი მნიშვნელობა, მაშინ პირველი ადგენს მანძილს რიგებს შორის, ხოლო მეორე - სვეტებს შორის.

მაგალითი

დავაყენოთ ერთნაირი მანძილი სვეტებსა და რიგებს შორის:

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

მაგალითი

დავაყენოთ სხვადასხვა მანძილი სვეტებსა და რიგებს შორის:

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

პრაქტიკული ამოცანები

შექმენით ცხრილი, რომელშიც მანძილი სვეტებსა და რიგებს შორის იქნება 10px.

შექმენით ცხრილი, რომელშიც მანძილი სვეტებსა და რიგებს შორის იქნება 10px და 5% შესაბამისად.