React: How to style React App from MovieDB API

1

I have been building an app that displays movie titles and I am at the point of styling the app. I am using the App.css file to do all the CSS. I want the app to look something like this

Screen Shot 2020-01-28 at 3.34.30 PM
Screen Shot 2020-01-28 at 3.34.30 PM2880×1612 676 KB
where all the movie cards are the same height and width along with the content inside the cards. But since I am fetching a bunch of random titles I usually get something like this

Screen Shot 2020-01-28 at 3.34.52 PM
Screen Shot 2020-01-28 at 3.34.52 PM2880×1616 393 KB

Where if there is no image or the word is too long, then the movie card breaks off into random sizes. What can I do to make all the movies I search for appear like how they do in the first picture

Here is some of my CSS code

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

.movies {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
  margin-top: 1rem;
  padding: 4rem;
}

.movies-items {
  display: flex;
  align-items: center;
  flex-direction: column;
  border-style: solid;
  padding: 1rem;
  margin-top: 1rem;
}

.image{
  width: 40%;
  height: 40%;
  border-style: solid;
}

.title{
  font-size: 30px;

}

.search-input {
  width: 50%;
  padding: 5px;
  font-size: 25px;
  border-style: solid;
}
3

Hi!
The size of one of the movie cards never seems to be set. How about using a grid for the container

.container {
   display: grid;
   width: 410px;
   margin: 20px auto;
   grid-gap: 10px;
   grid-template-columns: 200px 200px;
   grid-auto-rows: 300px;
}

Now each movie card has a fixed size. If you now give its child elements (headline, image etc) relative width and height every card should look the same.

1 Like