CSS - stop layout from changing - html

Question

I have a grid of images that are generated on the screen. The amount of images in a row on the grid depends on the size of the page. It all works well until the page gets too small, then the layout goes off.
This is the proper layout.
This is what happens when the page gets too small.
CSS:
.g {
padding: 0.25em;
overflow: hidden;
}
.g li {
float: left;
width: 50%;
padding: 10px;
padding-left: 10px;
border: 2px solid black;
background: #fff;
background-repeat: repeat;
background-size: cover;
}
.g img {
max-width: 100%
display: block;
}
#media screen and (min-width: 55em) {
.g li {
width: 25%;
}
.g li:nth-child(4n+1) {
clear: left;
}
.g li:nth-child(3n+1) {
clear: none;
}
}
#media screen and (min-width: 72em) {
.g li {
width: 20%;
}
.g li:nth-child(5n+1) {
clear: left;
}
.g li:nth-child(4n+1) {
clear: none;
}
}
Could I make it so if the page got small than the 4x4 grid, that grid still stayed, rather than it changing?

Answer 1

Change your CSS to:
.g {
padding: 0.25em;
overflow: hidden;
}
.g li {
float: left;
width: 20%;
padding: 10px;
padding-left: 10px;
border: 2px solid black;
background: #fff;
background-repeat: repeat;
background-size: cover;
}
.g img {
max-width: 100%
display: block;
}
.g li:nth-child(5n+1) {
clear: left;
}
.g li:nth-child(4n+1) {
clear: none;
}
EDIT:
Simply remove the first media wrap.
.g {
padding: 0.25em;
overflow: hidden;
}
.g li {
float: left;
width: 50%;
padding: 10px;
padding-left: 10px;
border: 2px solid black;
background: #fff;
background-repeat: repeat;
background-size: cover;
}
.g img {
max-width: 100%
display: block;
}
.g li {
width: 25%;
}
.g li:nth-child(4n+1) {
clear: left;
}
.g li:nth-child(3n+1) {
clear: none;
}
#media screen and (min-width: 72em) {
.g li {
width: 20%;
}
.g li:nth-child(5n+1) {
clear: left;
}
.g li:nth-child(4n+1) {
clear: none;
}
}