I was trying to create a somewhat responsive css grid layout with this kind of setup in mind:

        variable number of col
        through repeat minmax
------+----------------
aside | item | item | ...
      +------+------+----
      | item | item | ...
      +------+------+----
      | variant full row
      +------+------+----

I have tried this kind of rule. codepen link: https://codepen.io/gloryw/pen/pvyGQym

.grid-container {
  $gap: 17px;
  display: grid;
  grid-template-columns: [side] repeat(auto-fit, minmax(min(100%, max(300px, 100%/4 - #{$gap}*3/4)), 1fr));
  grid-template-rows: auto;
  gap: $gap;
  
  &__item {
    display: box;
    background: #dd3030;
    padding: 2rem;
  }
  
  &__item.aside {
    background: #30dd30;
    grid-column: side / span 1;
    grid-row: 1 / -1;
  }
  
  &__item.full {
    grid-column: 2 / -1;
    background: #3030dd;
  }
}

what i found out so far is that it seems that grid-row: 1/-1 will not try to expand the item to the max number of grid row if i don't explicitly specify the number of rows through grid-template-columns

is it the expected behavior? How can i achieve the layout that i have in mind with only grid, and doesn't have a set number of rows, since I would like for the columns items to create a new row if there's not enough space?