How to manage css media query grid columns - html

Question

I have 12 gallery thumbnails. How do I specify 4 media queries allowing only 6, 4, 3, or 2 columns while maintaining proportionate image scaling and equal margins at 10px between each thumbnail without causing the media query column rule to break? for example at min-width: 1000px it currently displays 5 columns instead of 6
<main class="gallery">
<img src="https://cdn0.wideopenpets.com/wp-content/uploads/2015/12/snake-in-hats-11feature-image-770x405.png" alt="" class="ctrl" id="btn-1">
<img src="https://i2.wp.com/metro.co.uk/wp-content/uploads/2015/11/party-snake.jpg?quality=90&strip=all&zoom=1&resize=644%2C427&ssl=1" alt="" class="ctrl" id="btn-6">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQk4j0EKreALTRlYkyIP8kLHfjY-1FcxUuyzjlv3pu2Uh_cdlu1&s" alt="" class="ctrl" id="btn-2">
<img src="https://ball-pythons.net/forums/cache2.php?img=https://41.media.tumblr.com/7f75b21e7edcc2adc45e4eb2f82a362a/tumblr_o52rt6NTRH1s9amz4o7_1280.jpg" alt="" class="ctrl" id="btn-7">
<img src="https://static.boredpanda.com/blog/wp-content/uploads/2015/11/cute-snakes-wear-hats-110__700.jpg" alt="" class="ctrl" id="btn-3">
<img src="https://www.thesun.co.uk/wp-content/uploads/2019/08/NINTCHDBPICT000516637716.jpg" alt="" class="ctrl" id="btn-8">
<img src="https://cdn0.wideopenpets.com/wp-content/uploads/2015/12/snake-in-hats-11feature-image-770x405.png" alt="" class="ctrl" id="btn-4">
<img src="https://i2.wp.com/metro.co.uk/wp-content/uploads/2015/11/party-snake.jpg?quality=90&strip=all&zoom=1&resize=644%2C427&ssl=1" alt="" class="ctrl" id="btn-9">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQk4j0EKreALTRlYkyIP8kLHfjY-1FcxUuyzjlv3pu2Uh_cdlu1&s" alt="" class="ctrl" id="btn-5">
<img src="https://ball-pythons.net/forums/cache2.php?img=https://41.media.tumblr.com/7f75b21e7edcc2adc45e4eb2f82a362a/tumblr_o52rt6NTRH1s9amz4o7_1280.jpg" alt="" class="ctrl" id="btn-10">
<img src="https://static.boredpanda.com/blog/wp-content/uploads/2015/11/cute-snakes-wear-hats-110__700.jpg" alt="" class="ctrl" id="btn-11">
<img src="https://www.thesun.co.uk/wp-content/uploads/2019/08/NINTCHDBPICT000516637716.jpg" alt="" class="ctrl" id="btn-12">
.gallery{
background: white;
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr) );
grid-gap: 10px;
align-items: start;
justify-items: center;
margin: auto;
padding: 40px 40px 40px;}
img {
background: lightblue;
box-shadow: none;
border-radius: 5px;
width:15vw;
height:10vw;
max-width: 100%;
}
.ctrl:active{
box-shadow: 0em 0em .5em rgba(0,0,0,0.75);
}
.ctrl:hover{
box-shadow: 0em 0em .5em rgba(0,0,0,0.75);
}
.ctrl:focus{
box-shadow: 0em 0em .5em rgba(0,0,0,0.75);
}
#media screen and (max-width : 505px ) {
.grid {
display: flex;
flex-wrap: wrap;
flex-direction: row;}
.cell {
width: 50%;
margin: 10px 10px 10px 10px;}}
#media ( min-width : 505px ) and (max-width : 800px ) {
.grid {
display: flex;
flex-wrap: wrap;
flex-direction: row; }
.cell {
width: calc(100% / 3);
margin: 10px 10px 10px 10px;
}
}
#media (min-width : 800px ) and ( max-width : 1000px) {
.grid {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.cell {
width: calc(100% / 4);
margin: 10px 10px 10px 10px;} }
#media screen and (min-width: 1000px) {
.grid {
display: flex;
flex-wrap: wrap;
flex-direction: row;}
.cell {
width: calc(100% / 6);
margin: 10px 10px 10px 10px;}}

Answer 1

Yep flexbox to the rescue, hat tip to Nikk Pearce's codepen, which I then edited to fit your situation. Add spacing between elements and styling as needed from here.
* {
box-sizing: border-box;
}
.container {
margin: auto;
max-width: 1200px;
}
.responsive-image {
max-width: 100%;
}
.cell img {
display: block;
}
#media screen and (min-width: 600px) {
.grid {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.cell {
width: 50%;
padding: 1em;
}
}
#media screen and (min-width: 1000px) {
.cell {
width: calc(100% / 4);
}
}
<div class="container">
<div class="grid">
<div class="cell">
<img src="http://placehold.it/800x800" class="responsive-image">
</div>
<div class="cell">
<img src="http://placehold.it/800x800" class="responsive-image">
</div>
<div class="cell">
<img src="http://placehold.it/800x800" class="responsive-image">
</div>
<div class="cell">
<img src="http://placehold.it/800x800" class="responsive-image">
</div>
<div class="cell">
<img src="http://placehold.it/800x800" class="responsive-image">
</div>
<div class="cell">
<img src="http://placehold.it/800x800" class="responsive-image">
</div>
<div class="cell">
<img src="http://placehold.it/800x800" class="responsive-image">
</div>
<div class="cell">
<img src="http://placehold.it/800x800" class="responsive-image">
</div>
<div class="cell">
<img src="http://placehold.it/800x800" class="responsive-image">
</div>
<div class="cell">
<img src="http://placehold.it/800x800" class="responsive-image">
</div>
<div class="cell">
<img src="http://placehold.it/800x800" class="responsive-image">
</div>
<div class="cell">
<img src="http://placehold.it/800x800" class="responsive-image">
</div>
</div>
</div>