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% болгон таблица түзүңүз.