Изменение столбцов в шаблоне сетки приводит к нарушению макета

Это потому, что в коде установлены grid-column-start и grid-column-end для header, aside и article - см. Демонстрацию ниже, где он работает для grid-template-columns: 1fr 700px с некоторыми изменениями в значениях grid-column:

body {
  padding: 0px;
  margin: 0px;
}

wrapper {
  display: grid;
  grid-template-columns: 1fr 700px;
}

header {
  grid-column-start: 1;
  grid-column-end: 3; /* CHANGED */
  height: 40px;
  background-color: grey;
}

nav li {
  display: inline-block;
  padding: 0px 10px;
}

aside {
  grid-column-start: 1;
  grid-column-end: 2; /* CHANGED */
  background-color: #7fa7e8;
  height: 50vh;
}

article {
  grid-column-start: 2; /* CHANGED */
  grid-column-end: 3; /* CHANGED */
  background-color: #7ee8cc;
  height: 50vh;
}

<wrapper>
  <header>
    <nav>
      <ul>
        <li>click here</li>
        <li>2nd click here</li>
      </ul>
    </nav>
  </header>
  <aside>
    Aside - Map content here
  </aside>
  <article>
    some content goes here
  </article>
</wrapper>

Короткий ответ

Когда ты говоришь:

wrapper {
   display:grid;
   grid-template-columns: 1fr 1fr 700px;
}

... вы определяете сетку с тремя явными столбцами.

Когда вы переключаетесь на:

grid-template-columns: 1fr 700px

... вы определяете сетку с двумя явными столбцами.

Этот метод представляет собой только один способ создания столбцов в сетке.

Другой способ - использовать неявные столбцы, что вы делаете со свойствами grid-column-start и grid-column-end.

header {
  grid-column-start: 1; 
  grid-column-end: 4;
}

aside {
  grid-column-start: 1; 
  grid-column-end: 3;
}

article {
  grid-column-start: 3; 
  grid-column-end: 4;
}

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

Подробнее о явных и неявных сетках

Явная сетка - это явно определенная вами сетка. Вы создаете явную сетку, когда используете следующие свойства:

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid (это сокращение для трех свойств выше, среди прочих)

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

Неявная сетка создается из строк и столбцов, которые автоматически создаются для размещения элементов сетки, расположенных за пределами явной сетки. Это может произойти с линейным размещением, используя такие свойства, как grid-column-start, grid-row-end и сокращения, такие как grid-column и grid-row.

В то время как grid-template-columns и grid-template-rows имеют размер явных дорожек, grid-auto-columns и grid-auto-rows - неявные дорожки.

Ссылка

Вот как спецификация определяет эти типы сеток:

7.1. Явная сетка

Три свойства grid-template-rows, grid-template-columns и grid-template-areas вместе определяют явную сетку контейнера сетки.

Свойство grid - это сокращение, которое можно использовать для одновременной установки всех трех.

Окончательная сетка может оказаться больше из-за того, что элементы сетки размещены за пределами явной сетки; в этом случае будут созданы неявные дорожки, размер этих неявных дорожек будет определяться свойствами grid-auto-rows и grid-auto-columns.

---

7.5. Неявная сетка

Свойства grid-template-rows, grid-template-columns и grid-template-areas определяют фиксированное количество дорожек, которые образуют явную сетку.

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

Эти линии вместе с явной сеткой образуют неявную сетку.

Свойства grid-auto-rows и grid-auto-columns определяют размер этих неявных дорожек сетки.

Проблема в том, что вы определяете grid-column-*, который сломается, если вы измените количество или структуру своих столбцов. Чтобы избежать этого, просто удалите их, и браузер автоматически разместит ваши элементы.

Вам нужно только указать, что первая должна охватывать всю первую строку:

body{
  padding:0px;
  margin:0px;
}

wrapper {
  display:grid;
  grid-template-columns: 1fr 700px;
}

header {
    grid-column: 1/-1; /*will take all the row*/
    height: 40px;
    background-color: grey;
}

nav li {
  display: inline-block;
  padding: 0px 10px
}

aside {
  background-color: #7fa7e8;
  height: 50vh;
}

article {
  background-color: #7ee8cc;
  height: 50vh;
}

<wrapper>
<header>
  <nav>
    <ul>
      <li>click here</li>
      <li>2nd click here</li>
    </ul>
  </nav>
</header>
<aside>
  Aside - content here
</aside>
<article>
  some content goes here
</article>

</wrapper>

Чтобы он работал в обоих случаях, вам нужно указать, что элемент article должен быть помещен в последний столбец, а элемент aside должен начинаться с первого до перед последним:

body{
  padding:0px;
  margin:0px;
}

wrapper {
  display:grid;
  grid-template-columns: 1fr 300px;
}

header {
    grid-column: 1/-1; /*will take all the row*/
    height: 40px;
    background-color: grey;
}

nav li {
  display: inline-block;
  padding: 0px 10px
}

aside {
  grid-column: 1/-2;
  background-color: #7fa7e8;
}

article {
  grid-column-end: -1;
  background-color: #7ee8cc;
}

<wrapper>
<header>
  <nav>
    <ul>
      <li>click here</li>
      <li>2nd click here</li>
    </ul>
  </nav>
</header>
<aside>
  Aside - content here
</aside>
<article>
  some content goes here
</article>

</wrapper>

<wrapper style="grid-template-columns: 1fr 1fr 300px;">
<header>
  <nav>
    <ul>
      <li>click here</li>
      <li>2nd click here</li>
    </ul>
  </nav>
</header>
<aside>
  Aside - content here
</aside>
<article>
  some content goes here
</article>

</wrapper>