Как задать одинаковую ширину для определённых блоков в CSS Grid?

Коротко — скорее всего причина в том, что один элемент занимает другое число колонок (или у него иного padding/margin), а между колонками стоит gap 10px. Когда элемент span'ит 2 колонки, в его итоговую ширину автоматически входит межколоночный gap, поэтому визуально он на 10px шире.

Варианты решения (выберите подходящий):

1) Сделать так, чтобы оба элемента занимали одинаковое число колонок
- если оба span'ят по 2 колонки — будут одинаковой ширины:
  .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; }
  .test__cell--left { grid-column: 1 / span 2; }
  .test__cell--wide { grid-column: 3 / span 2; }

2) Задать явные размеры колонок (чтобы суммы колонок были одинаковы)
- например, если хотите фиксированную ширину:
  .grid { grid-template-columns: 200px 200px 1fr; gap: 10px; }
  тогда элемент, занимающий одну колонку — 200px, занимающий две — 410px (200+10+200). Если не хотите учитывать gap — задайте колонки без gap или учтите gap в расчёте.

3) Убрать/изменить gap или учесть его в calc()
- если вам нужно, чтобы элемент, который span'ит 2 колонки, был точно равен элементу из одной колонки, можно уменьшить его ширину на gap:
  .test__cell--wide { width: calc(100% - 10px); box-sizing: border-box; }
  (это рабочий вариант только в простых ситуациях — обычно лучше управлять через grid-column/column sizes).

4) Проверить padding/margin/box-sizing
- установите box-sizing: border-box; и убедитесь, что у элементов нет лишних margin/padding, которые добавляют 10px.

Если хотите, пришлите HTML/CSS (или вставьте содержимое jsbin), я посмотрю конкретный код и напишу точную правку.

это из-за gap <br/> <pre><code class="css">.test {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "left left top-a top-b"
    "left left bottom bottom";
  gap: 10px;
  min-height: 420px;
}</code></pre>