使网格区域跨两行，但不跨两列

/* my grid not flexible enough ...

.wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas: "main aside"
                       "main main";
}

.wrapper > aside {
 grid-area: aside;
}

.wrapper > main {
  grid-area: main;
}

*/
/* back to the past */
.wrapper {
  overflow: hidden;/* to keep float inside */
}

.wrapper aside {
  float: right;
  width: 300px;
}


/*makup*/
.wrapper {
  box-shadow: 0 0 0 3px inset red;
}
.wrapper aside {
  padding: 1em;
  border: solid;
  box-shadow: 0 0 0 3px white, 0 0 0 6px red;
  margin: 0 0 1.5em 1em;
}

main {
  padding: 1em;
}

<section class="wrapper">
  <aside>Aside</aside>
  <main>MAIN</main>
</section>