I am making a responsive image gallery via flex-box. So i have 4 images in each container and there are 4 containers like this. So with normal view-port, its running fine with 4 rows and 4 columns.But the problem arises when my screen range is in between 671-880 px. There i am trying to make it a 3-column based gallery and its happening, but the 4th column which goes to bottom making a mess.It's not properly aligning.
Please have a look at my code and let me know how to modify it.
Also any suggestions to improve the code would be better.
P.s : i have mentioned a comment line in css so that everyone can identify the problem part easily.
*{
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
header{
background: #f1f1f1;
padding: 16px 32px;
text-align: center;
text-decoration-line: underline;
vertical-align: middle;
}
.photos{
margin-top: 5px;
display: flex;
flex-flow: row wrap;
padding: 2px 8px;
#justify-content: center;
width: 100%;
}
.photos-col-1,.photos-col-2,.photos-col-3,.photos-col-4{
flex-grow: 1;
display: flex;
}
.photos-col-1 img,.photos-col-2 img,.photos-col-3 img,.photos-col-4 img{
flex-grow: 1;
padding: 4px 4px;
margin: 2px 2px;
}
@media screen and (max-width:1100px){
.photos-col-1,.photos-col-2,.photos-col-3,.photos-col-4{
flex-flow: column wrap;
}
}
/* Problem Ocurrs here for 4th coloumn...Scroll down in browser to see the 4th coloumn in view-port range 671-880px*/
@media screen and (max-width:880px) and (min-width:671px){
.photos-col-1,.photos-col-2,.photos-col-3{
flex-flow: column wrap;
width: 33%;
flex:0 1;
margin: 0 auto;
}
.photos-col-4{
flex-flow: row wrap;
padding: 0 32px;
width: 100%;
}
.photos-col-1 img,.photos-col-2 img,.photos-col-3 img ,.photos-col-4 img{
flex: 0 1;
padding: 4px 4px;
margin: 2px 2px;
text-align: center
}
.photos-col-4 img{
padding: 0 20px;
}
}
@media screen and (max-width:670px) and (min-width:451px){
.photos-col-1,.photos-col-2,.photos-col-3,.photos-col-4{
flex-flow: column wrap;
width: 50%;
flex:0 1;
margin: 0 auto;
}
.photos-col-1 img,.photos-col-2 img,.photos-col-3 img ,.photos-col-4 img{
flex: 0 1;
}
}
@media screen and (max-width:450px){
.photos-col-1,.photos-col-2,.photos-col-3,.photos-col-4{
flex-flow: column wrap;
width: 100%;
flex:0 1;
margin: 0 auto;
}
.photos-col-1 img,.photos-col-2 img,.photos-col-3 img ,.photos-col-4 img{
flex: 0 1;
}
}<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><title>Example Title</title><meta name="author" content="Your Name"><meta name="description" content="Example description"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><link rel="icon" type="image/x-icon" href=""/></head><body><header><h1>Responsive Image Grid</h1></header><main><!-- Photo Grid --><section class="photos"><section class="photos-col-1 row"><img src="https://picsum.photos/200/300?random=1"><img src="https://picsum.photos/200/300?random=2"><img src="https://picsum.photos/200/300?random=3"><img src="https://picsum.photos/200/300?random=4"></section><section class="photos-col-2 row"><img src="https://picsum.photos/200/300?random=25"><img src="https://picsum.photos/200/300?random=24"><img src="https://picsum.photos/200/300?random=23"><img src="https://picsum.photos/200/300?random=22"></section><section class="photos-col-3 row"><img src="https://picsum.photos/200/300?random=14"><img src="https://picsum.photos/200/300?random=13"><img src="https://picsum.photos/200/300?random=15"><img src="https://picsum.photos/200/300?random=12"></section><section class="photos-col-4 row"><img src="https://picsum.photos/200/300?random=6"><img src="https://picsum.photos/200/300?random=7"><img src="https://picsum.photos/200/300?random=8"><img src="https://picsum.photos/200/300?random=9"></section></section></main><footer></footer><script type="text/javascript" src=""></script></body></html>