Фосила байни сутунҳо ва сатрҳо дар 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% бошад.