Как ограничить grid только 2 элементами по оси Y и бесконечным количеством со скролом по оси x

У меня есть два контейнера:

(является grid'дом)

        <div className='Reviews'>внутри находятся много-много(или нет) контейнеров review(код ниже)</div>

и (вот тот самый контейнер)

          <div className='review'>
        <div className='ReviewContent'>
          <div className='NamePositionCompanyAndStars'>
            <div className='NameAndPosition'>
            <p className='Name'>Олександр</p>
            <div className='Position'>
              <p className='PositionSign'>Co-CEO</p>
              <p className='OfSign'>of</p>
              <p className='NameOfCompany'>Feed Motion ADS</p>
            </div>
            </div>
            <div className='Stars'>
              <img src={images.starrate} alt="" />
              <img src={images.starrate} alt="" />
              <img src={images.starrate} alt="" />
              <img src={images.starrate} alt="" />
              <img src={images.starrate} alt="" />
            </div>
          </div>
          <p className='UserReview'>Були проведені чудові роботи. Налаштували оптимізували та підказали</p>
        </div>
      </div>

я не знаю сколько будет елементов в сетке, может быть их будет 10, потом 30, потом 50, только лишь нужно всегда иметь 2 елемента по Y и бесконечность (свободное количество) по X, забыл, какой код за это отвечает, но желательно, что бы они распределялись сверху вниз

мне нужно поставить grid вот таким образом со скролом вправо

вот эти белые квадратики - это и есть мой второй контейнер просто я отправил CSS код без "косметичестих" настроек

CSS код обох контейнеров:

.Reviews{
display: grid;
width: 100%;
height: 874px;

gap: 20px; /*это всё что я смог понять в grid*/
z-index: 9;
margin-top: 58px;
margin-left: 90px;
}

.review{
    display: flex;
    flex-direction: column;
    width: 703px;
    height: 425px;

    background: white;
}