리액트로 영화웹 만들기에서 클론코딩 진행중입니다. 공부하면서 map()을 이용해서

<div className={styles.background}>
        {loading ? <h1>LOADING...</h1> : 
        <div className={styles.home}>
          {movies.map((movie)=>
          <Movie 
          id={movie.id}
          key={movie.id}
          medium_cover_image={movie.medium_cover_image} 
          title={movie.title} summary={movie.summary} 
          genres={movie.genres} 
          />
          )}
        </div>
        }
      </div>

다음과같이 큰 div안에 여러개의 <Movie />컴포넌트들을 배치할 수 있었는데요. 그런데 화면배치가 아래와같이 했을 때는 하나의 div안에 컴포넌트들이 새로로 배치돼서 열이 하나밖에 안나옵니다. map()함수를 특정 부분까지만 시행해서 1번열에 배치하고 나머지 부분을 2번열에 배치하고 싶은데 어떤식으로 응용을해야할지 알고싶습니다.