Trying to create a responsive image gallery, react+Sass+Flexbox - css

Question

I'm trying to create a 3X3 image (these are image mocks of videos) gallery in a react app. I'm using sass and flexbox grid, and I'm having some trouble with css and responsiveness issues across multiple screen sizes:
here's how it looks like(as it should) on a huge iMac screen(5120 x 2880)
And on a normal sized Laptop screen, it gets messy and even the background image is breaking for some reason:
My goal is to have a responsive 3x3 grid on most common screen sizes, going down to 2x3 or 1x2 on very small screens. the size of every image must be in same ratio for all screens(if the image must resize itself to fit, so is the rest of the page).
I used create-react-app and Sass. I also have access to react-bootstrap but I haven't used any of it yet, trying to make this screen with pure flexbox. I tried wrapping every image with a wrapper div and make special rules on it but it didn't help.
Thanks for the help in advance, for the record, I'm not very experienced with advanced css, previously used basic bootstrap and helper libraries, trying to make this on my own mostly for learning purposes.
Dashboard.jsx
<div className="dashboard-page-wrapper">
<div className="page-content-wrapper">
<Gallery videosAmount = {6} videoUrl = {video}/>
</div>
</div>
Dashboard.scss
.dashboard-page-wrapper {
background-image: url("../../assets/map_bg.png");
height: 100vh;
background-size: cover;
.page-content-wrapper {
width: calc(100% - 290px);
}
}
Gallery.jsx
<div className="video-gallery-wrapper">
<ImageGallery videosAmount={videosAmount} videoUrl= {videoUrl} />
</div>
Gallery.scss
.video-gallery-wrapper {
min-height: 400px;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
align-items: auto;
align-content: center;
padding: 50px;
&:after {
display: block;
flex: 999 999 auto;
}
.image-wrapper {
img {
flex: 0 0 auto;
margin: 20px 10px 20px 20px;
height: 305px;
width: 479px;
}
}
}

Answer 1

Flexbox layout requires your HTML markup to have a certain structure. Because you provided prebuilt code I whipped up a comparable example that I hope helps.
The only place you need any flexbox rules is on the flex container and the flex children, that must be direct child elements of the flex container.
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
Here, I am applying flexbox layout to the container with display: flex. The flex-wrap rule allows the items to flow into multiple lines. And justify-content: space-between makes the items sit up against the left and right edges of the container. This provides a vertical gutter between items as long as they do not take up all the available horizontal space.
.video-item {
flex: 0 0 31%;
}
The flex child elements get this flex rule, the value is shorthand for flex-grow: 0, flex-shrink: 0, and flex-basis: 31%. The flex basis of flex items establishes a starting width, and since I have "turned off" grow and shrink the basis serves as the width from here on.
The images you put into the document will try and fight with the sizing of these divs so you need to instruct the images to obey the size of their wrapper div:
.video-wrap img {
width: 100%;
height: auto;
}
Lastly, I just change the flex-basis of the items at various screen sizes, using media queries, to control the number of items across. Check out the full example in full page mode and play with the screen size.
body {
background: #ccc;
margin: 0;
padding: 20px;
}
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.video-item {
flex: 0 0 31%; /* tweak the thrid value to adjust the vertical gutters */
background: #fff;
margin-bottom: 20px;
}
.video-wrap img {
width: 100%;
height: auto;
}
.text-wrap {
text-align: center;
padding: 10px;
}
#media (max-width: 640px) {
.video-item {
flex: 0 0 48%; /* 2 across */
}
}
#media (max-width: 480px) {
.video-item {
flex: 0 0 100%; /* 1 accross */
}
}
<div class="wrapper">
<div class="video-item">
<div class="video-wrap">
<img src="https://picsum.photos/270/180" />
</div>
<div class="text-wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<div class="video-item">
<div class="video-wrap">
<img src="https://picsum.photos/270/180" />
</div>
<div class="text-wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<div class="video-item">
<div class="video-wrap">
<img src="https://picsum.photos/270/180" />
</div>
<div class="text-wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<div class="video-item">
<div class="video-wrap">
<img src="https://picsum.photos/270/180" />
</div>
<div class="text-wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<div class="video-item">
<div class="video-wrap">
<img src="https://picsum.photos/270/180" />
</div>
<div class="text-wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<div class="video-item">
<div class="video-wrap">
<img src="https://picsum.photos/270/180" />
</div>
<div class="text-wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>