Как заставить считать grid-gap в grid?

Question

[wakenbyWork]

<div class="section-cases__grid">
  <div style="width: 100%; height: 300px; background: #000;"></div>
  <div style="width: 100%; height: 300px; background: #000;"></div>
</div>

.section-cases {
  &__grid {
    display: grid;
    grid-template-columns: 70% 30%;
    grid-gap: 20px;
  }
}

В итоге div выходит за границы:

Фотография

Все из за того что в grid-template-columns все в процентах((

Answer 1

[Андрей Мартынкевич]

Почему бы не задать не в процентах, а в частях?(fr).

Answer 2

[an]

вы же задаете в процентах ширину, соответственно гап будет к процентам приплюсовываться
задавайте размеры в фракциях fr