Элементы сетки CSS не выровнены должным образом

Question

кажется простой задачей, которую я пытаюсь выполнить с незапамятных времен. Я не могу правильно выровнять элементы сетки по вертикали. Пожалуйста, взгляните на скрипку, чтобы понять. Может быть, кто-то может помочь мне с этим вопросом.

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

Если вы хотите сделать это только с одним родительским элементом, это может быть решением:

.wrapper {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-row-gap: 50px;
  grid-column-gap: 10px;
  grid-template-areas: 
    'item1 item1 item1 item1 item2'
    'item3 item3 item4 item4 item5';
}
.wrapper > div {
  background: red;
  height: 400px;
}

.item1 {
  grid-area: item1;
}
.item2 {
  grid-area: item2;
}
.item3 {
  grid-area: item3;
}
.item4 {
  grid-area: item4;
}
.item5 {
  grid-area: item5;
}

<div class="wrapper">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
  <div class="item4"></div>
  <div class="item5"></div>
</div>

Answer 2

Ну, с некоторым размышлением и расчетом этот здесь делает трюк

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/