Как на grid выстраить колонки?

HTML:

<div class="parent">
    <div class="div1"> </div>
    <div class="div2"> </div>
    <div class="div3"> </div>
    <div class="div4"> </div>
</div>

CSS:

.parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 3 / 4 / 4; }
.div2 { grid-area: 4 / 3 / 7 / 4; }
.div3 { grid-area: 1 / 1 / 7 / 2; }
.div4 { grid-area: 1 / 2 / 7 / 3; }

Можно воспользоваться генератором

HTML:

<div class="content">
  <div class="lists">lists</div>
  <div class="numbers">numbers</div>
  <div class="view">view</div>
  <div class="form">form</div>
</div>

CSS:

.content {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  
}
.content > div {
  border: 1px solid #efefef;
}

.lists {
  grid-column: 1 / 2;
  grid-row: 1 / 4; 
}

.numbers {
  grid-column: 2 / 5;
  grid-row: 1 / 4;
}

.view {
  grid-column: 5 / 7;
  grid-row: 1 / 3;
}

.form {
  grid-column: 5 / 7;
  grid-row: 3 / 4
}