Expanding cells in CSS grid layout

Answer 1

This is something better suited to flexbox but if your structure is as simplistic as you indicate the only-child can be used here.

.main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  margin-bottom: 1em;
}


/* The following is not essential - for decoration purposes only */

.left {
  background-color: green;
  height: 25vh;
}

.left:only-child {
  grid-column: 1 / -1;
}

.right {
  background-color: orange;
}

  
Left
  
Right



  
Left