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% бўлган жадвал яратинг.