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% болатын кесте жасаңыз.