Q:

Keep Changing the Div Size on a Certain Scale of Window Size

So while I was coding in some media quarries for my beginner image gallery project. I've noticed that I need to decrease the div's width that contains my img tag by 10px every time window size decreased by 30px in order to have 3 images on one row.
I was wondering instead of typing that all in, was there a way to interact the CSS and  set a way to check that each time in a loop. I don't see how I can share my attempt in this situation.
Although I've asked Google for some answers and from what I've understand I think it might be possible with a CSS preprocessor such as SaSS but I've no knowledge of any and just basic knowledge on JavaScript to be honest.
So I don't see how I can share my attempt in this situation. I probably don't know the right syntax or couldn't find it so it's more like a theoretical question for me right now.

A:

If i'm right you want to place 3 images in row without having to right a messy code. You can use grid to eliminate any issues. 
You can expand the gap size by changing the grid-gap

.grid-container{
  display: grid;
  grid-template-columns: repeat( 3, minmax(auto, 1fr) );
  grid-gap: 10px;
}
<div class="grid-container">
  <div style="background: lightblue; height: 100px;"></div>
  <div style="background: lightblue; height: 100px;"></div>
  <div style="background: lightblue; height: 100px;"></div>
</div>

