¿Es posible un CSS grid con elementos automáticamente distribuidos que se encuentren “desfasados” en filas y columnas?

Estoy tratando de determinar si es posible que una cuadrícula CSS coloque automáticamente elementos que se escalonen entre sí tanto en la columna como en el nivel de fila.

Es un poco difícil describir exactamente lo que quiero, así que aquí hay un ejemplo de cómo se vería una cuadrícula de este tipo, dado que los elementos estuvieran en el orden correcto (no necesariamente en el orden que tengo en el HTML actual):

.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-auto-rows: 100px;
  column-gap: 20px;
  row-gap: 20px;
  justify-content: center;
}

.grid div{
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: white;
}

.grid-item-1{
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 3;
}

.grid-item-2{
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 3;
  grid-column-end: 4;
}

.grid-item-3{
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
}

.grid-item-4{
  grid-row-start: 2;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 2;
}

.grid-item-5{
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 4;
}

<div class="grid">
  <div class="grid-item-1">1</div>
  <div class="grid-item-2">2</div>
  <div class="grid-item-3">3</div>
  <div class="grid-item-4">4</div>
  <div class="grid-item-5">5</div>
</div>

Me gustaría poder asignar alturas y anchuras en píxeles a los elementos y permitir que la cuadrícula los distribuya automáticamente en este arreglo, sin tener que codificar el área de la cuadrícula de cada elemento.

He buscado soluciones por todas partes, pero sin éxito. Solo quiero saber si es posible, o si tal disposición es solo posible con áreas de cuadrícula codificadas para cada elemento.