How to properly reset grid-template-columns?

The initial value of grid-template-columns and grid-template-rows is none.

So to reset the properties (meaning there are no explicit tracks created), you would switch to grid-template-columns: none in your media query.

You can also switch to grid-template-columns: 1fr, which creates a grid with one explicit column.

article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px;
  grid-column-gap: 5pt;
  grid-row-gap: 5pt;
}

section {
  background-color: green;
}

@media (max-width: 600px) {
  article {
    grid-template-columns: 1fr;
    /* OR, change value to 'none' */
  }
  section {
    background-color: orangered;
  }
}

<article>
  <section></section>
  <section></section>
</article>

jsFiddle demo

Spec reference:

• § 7.2. Explicit Track Sizing: the grid-template-rows and grid-template-columns properties

Also consider using unset:

grid-template-columns: unset;

Which resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

So:

.page {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  grid-column-gap: 5pt;
  grid-row-gap: 5pt;
}

@media (max-width: 1024px) {
  .page {
    /* Here: */
    grid-template-columns: unset;
  }
}