Removing padding on last-child results in different sized element - css

Question

I have an image gallery with horizontal thumbnails below the featured image. I am adding padding-right:10px; to all but the last-child in an effort to equally space these elements. This works as intended on all but the last thumbnail, where it's slightly larger than the rest.
It makes sense why this is happening, but I am not sure how to fix it. This was the solution recommended on numerous other Stack Overflow posts. Any workaround would be appreciated.
<style>
.gallery-grid {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 1fr;
column-gap: 10px;
row-gap: 30px;
}
.image-thumb {
float: left;
width: 20%;
padding-right: 10px;
box-sizing: border-box;
}
.image-thumb:last-child {
padding-right: 0;
}
</style>
<div class="gallery-grid">
<img id="featured-image" src="featured.jpg" style="width:100%">
<div class="image-thumb">
<img src="featured_thumb.jpg" alt="Mountains" style="width:100%" onclick="myFunction(this);">
</div>
<div class="image-thumb">
<img src="thumb.jpg" alt="Nature" style="width:100%" onclick="myFunction(this);">
</div>
<div class="image-thumb">
<img src="thumb.jpg" alt="Snow" style="width:100%" onclick="myFunction(this);">
</div>
<div class="image-thumb">
<img src="thumb.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
</div>
<div class="image-thumb">
<img src="thumb.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
</div>
</div>

Answer 1

If you want to stick using float insteed of flex you could use margin insteed of padding. Then you can calculate the total space taken by the margin, divide it between the number of elements and rest it to the width using calc
(margin-right:10px * 4) / 5 = 8
Example:
* {box-sizing:border-box;}
.box {
height:100px;
background-color:blue;
float:left;
width:calc(20% - 8px);
margin-right:10px;
}
.box:nth-child(5) {margin-right:0;}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>