CSS гридларида устунлар ва қаторлар ўртасидаги масофа

gap хоссаси ёрдамида гриднинг устунлари ва қаторлари ўртасидаги масофани бир вақтнинг ўзида белгилаш мумкин.

Ўзгартиргич бўлса битта қиймат, ёки бошлиқ орқали иккита қиймат берилиши мумкин. Агар битта қиймат берилса, у бир вақтнинг ўзида устунлар ва қаторлар ўртасидаги масофани белгилайди. Агар иккита қиймат берилса, у ҳолда биринчи қиймат қаторлар ўртасидаги масофани, иккинчиси эса устунлар ўртасидаги масофани белгилайди.

Мисол

Устунлар ва қаторлар ўртасидаги масофани бир хил қиламиз:

html<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>

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

Результат:

Мисол

Устунлар ва қаторлар ўртасидаги масофани турли қиламиз:

html<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>

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

Результат:

Амалий машғулотлар