.popular-movies {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;

  height: 50vh;
}

img {
  width: 100%;
  height: 30vh;
  object-fit: cover;
  border-radius: 1rem;
  margin-bottom: 1rem;
}

h2 {
  font-size: 20px;
}

.filter-container button {
  margin-right: 2rem;
  min-width: 5rem;
  padding: 0.5rem 1rem;
  border: none;
  background: white;
  color: rgb(65, 98, 168);
  border-radius: 1rem;
  border: 2px solid rgb(65, 98, 168);
  font-weight: bold;
  cursor: pointer;
}

button.active {
  background: rgb(65, 98, 168);
  color: white;
}


근데 내용이 세로로만 쭉 이어지는데 3개씩 나오게하는방법 없나? 

fixed 하면 짤림


ㅊㅊ부탁