在宽度为 640px、根字号默认为 16px 的浏览器视口中，这个页面会输出什么？

<main class="layout"><article>Report</article><aside>Filters</aside></main>
<style>
  .layout { display: grid; grid-template-columns: minmax(0, 1fr); }
  @media (width >= 48rem) {
    .layout { grid-template-columns: minmax(0, 1fr) 16rem; }
  }
</style>
<script>
  const value = getComputedStyle(document.querySelector('.layout')).gridTemplateColumns;
  console.log(value.split(' ').length);
</script>