Как сделать равномерное расстояние в сетке грид?

Question

[Young11]

подскажите , как сделать так, чтобы блоки в грид сетке были на расстояние которое я задал в значении параметра gap. Просто сейчас оно как-то не равномерно стоит

.list {
  width: 1760px;
  height: 774px;
  display: grid;
  border: 1px solid red;
  gap: 22px;
  list-style: none;
}

.item {
  &:nth-child(1),
  &:nth-child(2),
  &:nth-child(3),
  &:nth-child(4) {
    width: 572px;
    height: 376px;
    background: linear-gradient(135deg, #f0f0f0, #d9d9d9);
  }

  &:nth-child(5),
  &:nth-child(6),
  &:nth-child(7),
  &:nth-child(8) {
    width: 275px;
    height: 287px;
    background: linear-gradient(135deg, #f0f0f0, #d9d9d9);
  }

  &:nth-child(9) {
    width: 572px;
    height: 156px;
    background: linear-gradient(135deg, #f0f0f0, #d9d9d9);
  }

  &:nth-child(1) {
    grid-area: 1 / 1 / 5 / 3;
  }

  &:nth-child(2) {
    grid-area: 1 / 3 / 5 / 5;
  }

  &:nth-child(3) {
    grid-area: 5 / 1 / 9 / 3;
  }

  &:nth-child(4) {
    grid-area: 5 / 3 / 9 / 5;
  }

  &:nth-child(5) {
    grid-area: 1 / 5 / 4 / 6;
  }

  &:nth-child(6) {
    grid-area: 1 / 6 / 4 / 7;
  }

  &:nth-child(7) {
    grid-area: 4 / 5 / 7 / 6;
  }

  &:nth-child(8) {
    grid-area: 4 / 6 / 7 / 7;
  }

  &:nth-child(9) {
    grid-area: 7 / 5 / 9 / 7;
  }
}
<ul class="list">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

Comments

[Ankhena]

Как сделать равномерное расстояние в сетке грид?

Взять калькулятор и посчитать нормально размеры.
287+22+287/3 != 376

Возможно, вам будет удобнее плясать от сетки, а не задавать размеры ячейкам.
Сейчас вы и блоку задали размеры и сетку сделали, хоть и неявно и гэпом прибили.