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

Сейчас ситуация такая: подскажите, как сделать так, чтобы блоки в грид сетке были на расстояние которое я задал в значении параметра 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>