How to create a responsive grid (movie website) - html

Question

I have been attempting to create a grid of movies, exactly like http://www0.yesmovies.net/
this is my first project using responsive design (rather than a simple minmax usage) and it is stopping me from moving forward.
if someone could take some time out to help me achieve this and tell me the correct way to go about it, it would be highly appreciated believe me.
i have tried using css grid (im pretty sure its the way i need to go) but i cannot get my head round the responsive side.
Thankyou.

Answer 1

I think you can play around with the viewport of the website by resizing your browser's width/height and identify what about the movie grid feels responsive. I gave you a starting point of some of things I noticed:
The movie cards grow smaller as I resize my viewport from larger to smaller.
At a certain set of dimensions, the movie cards go from being 8 smaller cards per row to 6 slightly larger cards.
As I keep shrinking, the site continues to resize the movie cards and change the number of cards per row.
You can achieve this level of responsiveness by using:
either Flexbox or CSS Grid and using their properties
media queries, which looks like #media only screen and...
using percentages or other scalable units for your width and height dimensions on your movie cards
using min-width and min-height to prevent your movie cards from getting too small
alternatively, you can also use max-width and max-height to do the opposite
I have included a snippet that demonstrates a rough implementation of how Flexbox might be used to achieve responsiveness for your site.
const createMovieCard = color => {
const div = document.createElement('div')
div.classList.add('movie__card')
div.style.background = color
div.innerHTML = 'Example movie'
return div
}
const container = document.querySelector('.container')
const colors = ['red', 'blue', 'yellow', 'green', 'orange']
for (let i = 0; i < 50; ++i) {
const color = colors[i % colors.length]
container.appendChild(createMovieCard(color))
}
.container {
width: 100%;
text-align: center;
/* By setting this div's display to flex,
I get access to Flexbox's properties.
I can now use these properties to manipulate
the children of this div. */
display: flex;
/* This is will center this div's children to the left. */
justify-content: left;
/* flex-wrap acts much like a code editor's soft wrapping feature. */
flex-wrap: wrap;
}
.movie__card {
margin: 1em;
background: lightgrey;
/* Children whose parent has `display: flex` also gain access to Flexbox
properties. */
flex: 0;
/* By setting width as a percentage and having a min-width property, you
enable your movie cards to have a larger width when the viewport is
larger and prevent them from getting too small when the viewport
is smaller, such as on a mobile viewport. */
width: 15%;
min-width: 100px;
height: 150px;
}
<div class="container"><!-- The movie cards are generated here using JS. --></div>