Distanca midis kolonave dhe rreshtave në CSS Grid

Me ndihmën e vetisë gap mund të caktohet njëkohësisht distanca midis kolonave dhe rreshtave të grid-it.

Mund të transmetohet ose një vlerë, ose dy nga njëra-tjetra me hapësirë. Nëse transmetohet një vlerë, ajo cakton njëkohësisht distancën midis kolonave dhe rreshtave. Nëse transmetohen dy vlera, atëherë e para cakton distancën midis rreshtave, dhe e dyta - midis kolonave.

Shembull

Le të caktojmë distancë të njëjtë midis kolonave dhe rreshtave:

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

Shembull

Le të caktojmë distanca të ndryshme midis kolonave dhe rreshtave:

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

Detyra praktike

Krijoni një tabelë, në të cilën distanca midis kolonave dhe rreshtave do të jetë 10px.

Krijoni një tabelë, në të cilën distanca midis kolonave dhe rreshtave do të jetë 10px dhe 5% përkatësisht.