Convert template to pure css grid

Question

I am trying to build a minor template, more specific this is what I am trying to do in css grid layout:

I am not convinced that my way is the modern approach, and would like to know if there is a pure way of doing this in only css grid, instead of mixing it with hights?

This is my fiddle of what I have tried: https://jsfiddle.net/uwbsd2g6/

.wrapper {
  display: grid;
  grid-template-columns: 50% 50%;
}

.wrapper .col {
  border: 1px solid blue;
  min-height: 500px;
}

.wrapper .col-v-1 {
  height: 50%;
}

.wrapper .col-v-2 {
  height: 50%;
  color: #fff;
  background-color: blue;
}

<div class="wrapper">
    <div class="col">
        <div class="col-v-1">Here is some text</div>
        <div class="col-v-2">Heres is another text</div>
    </div>
    <div class="col">
        This is a third text
    </div>
</div>

Answer 1

You can do this purely with css grid (assuming that you have an element with 100% height of the container as the parent) by using grid-template-column and grid-template-row as seen below

<style>
.wrapper {
  height:100vh;
}
.outline{
  outline: 1px red solid;
 }
.grid {
display:grid
}
.grid-cols-2 {
  grid-template-columns: 1fr 1fr;
}
.grid-rows-2 {
  grid-template-rows: 1fr 1fr;
}
</style>


<div class="wrapper outline grid grid-cols-2">
    <div class="grid grid-rows-2 outline">
      <div class="outline">Here is some text</div>
      <div class="outline">Heres is another text</div>
    </div>
    <div class="outline">
      This is a third text
    </div>
  </div>

You can do it with grid template column and row