მანძილი სვეტებსა და რიგებს შორის 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;
}

Результат:

პრაქტიკული ამოცანები