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

Это потому, что в коде установлены 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>

Проблема в том, что вы определяете 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>

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

Когда ты сказал:

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. The Explicit Grid

The three properties grid-template-rows, grid-template-columns, and grid-template-areas together define the explicit grid of a grid container.

The grid property is a shorthand that can be used to set all three at the same time.

The final grid may end up larger due to grid items placed outside the explicit grid; in this case implicit tracks will be created, these implicit tracks will be sized by the grid-auto-rows and grid-auto-columns properties.

---

7.5. The Implicit Grid

The grid-template-rows, grid-template-columns, and grid-template-areas properties define a fixed number of tracks that form the explicit grid.

When grid items are positioned outside of these bounds, the grid container generates implicit grid tracks by adding implicit grid lines to the grid.

These lines together with the explicit grid form the implicit grid.

The grid-auto-rows and grid-auto-columns properties size these implicit grid tracks.