Как правильно сверстать GRID

[Krasi]

Я искал решение на Flex и Grid, мне было интересно, как сделать 3 независимых столбца на flexe и вставлять в каждый контент разной высоты, нашел вот это:
Безымянный11.jpg
На рисунке выше все смотрится хорошо, но если мы начнем изменять ширину браузера (я хочу адаптивный дизайн, чтобы в телефоне таблица становилась с одной ячейкой), появляется прокрутка по ширине и контент все равно остается по ширине на нескольких столбцах. На графики не смотрите, ширину и перерисовку просто не добавил.
Безымянный22.jpg
Что я делаю сейчас:

<style>
    .container { 
      display: grid; 
      grid-template-columns:  repeat(3, 1fr);  
      grid-template-rows: repeat(5, 150px); 
      background-color: none; 
      gap: 10px; 
      border-radius: 12px;
      margin: 10px 10px;
    }
    .container > div { 
      background: linear-gradient(140deg, rgba(255,255,240,.9), rgba(240,255,255,0.9));
      border: 1px solid rgba(255,255,255,.3);
      border-radius: 6px;
      padding: 10px 17px;
    }
    #one { 
      grid-column: 2/4; 
      grid-row: 1/7;
      min-width: 350px;
    } 
    #two { 
     grid-column: 1/2; 
     grid-row: 1/3; 
    }
    #three { 
     grid-row: 3/5; 
    }
    #four { 
     grid-row: 5/7; 
    }
    
    #five {
        grid-column: 1/2; 
      grid-row: 7/9; 
    }   
    #seven { 
      grid-row: 1/7; 
    }
</style>

<div id="nine">Image Nine</div>

Может быть, тут можно добавить какой-то аттрибут типа переноса элементов на следующую строку при недостающей ширине браузера? Если вариант ну так себе - предложите хорошую идею, как иначе мне сделать то, что хочу.

[maks1331]

@media(max-width:тут пишем нужное значение + px){
.мой_класс{
сместись сюда;
}
.мой_класс_2{
А ты сюда;
}
}

Это самый что ни на есть хороший способ сделать сайт адаптивным