Expanding cells in CSS grid layout

Answer 1

You can rely on implicit grid creation:

.main {
  display: grid;
  grid-template-columns: 2fr;
  grid-auto-columns:1fr; /* this will trigger when you add the "right" element */
  grid-auto-flow:column;
  margin:5px;
}


.left {
  background-color: green;
}

.right {
  background-color: orange;
}

  
Left
  
right



  
Left

It does also work if you want to remove left:

.main {
  display: grid;
  grid-template-columns: 2fr;
  grid-auto-columns:1fr; /* this will trigger when you add the "left" element */
  grid-auto-flow:column;
  margin:5px;
}


.left {
  background-color: green;
  grid-column-end:1; /* added this */
}

.right {
  background-color: orange;
}

  
Left
  
right



  
right