CSS grid elements not aligned properly

Question

seems like an easy task which Im trying to get done since hours. I cant get my grid elements vertical aligned properly. Please take a look at the fiddle to get the idea. Maybe someone could help me with this issue.

HTML

 <section class="top">
   <div></div>
   <div></div>
 </section>

 <section class="bottom">
   <div></div>
   <div></div>
   <div></div>
 </section>

CSS

 section {
   display: grid; 
   grid-template-rows:auto; 
   margin: 40px 0 0 0
 }

 section.top {
   grid-template-columns:2fr 1fr;
   grid-column-gap: 50px;
 }

 section.bottom {
   grid-template-columns:1fr 1fr 1fr;
   grid-column-gap: 50px;
 }

 section div {
   background:lightblue;
   height:400px
 }

https://jsfiddle.net/ecj1wrae/

Answer 1

Well, with some thinking and calculation this one here does the trick

CSS

section.top {
  grid-template-columns:calc(66% + 2vw) 34%;
  grid-column-gap: 2vw;
}

section.bottom {
  grid-template-columns:33% 33% 34%;
  grid-column-gap: 2vw;
}

https://jsfiddle.net/ecj1wrae/3/