Keep grid fields to 100% screen width

Question

In this example I simply want to create a grid with 4 boxes that are of the same size and should rescale when the screen size is getting smaller. However I run out of ideas. I use almost the same properties in the other grids in the full code as well and they rescale normally. Any ideas what that's about?

.four-images{
width: 100%;
grid-column: 1/5;
grid-row: 2/3;
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}

.four-images-image{
  width: 100%;
  grid-column: 1/2
}

.four-images-image1{
  grid-column: 2/3
}
   
.four-images-image2{
  grid-column: 3/4
}

.four-images-image3{
  grid-column: 4/5
}

.four-images img{
  object-fit: cover;
  overflow: hidden;
}

    <div class="four-images">
      <div class="four-images-image">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAACVBMVEX///8DAQQAAABKx2UUAAABG0lEQVR4nO3PQQ3AMBDAsLb8QY9Bf9PkW4wgWXu69XXA6zr0dejr0Nehr0Pf7w7PBLfDsyY4HfI69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69N0O95lg3w4H6tDXoa9DX4e+Dn0d+h6tMzE9MLfjigAAAABJRU5ErkJggg==">
      </div>

      <div class="four-images-image1">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAACVBMVEX///8DAQQAAABKx2UUAAABG0lEQVR4nO3PQQ3AMBDAsLb8QY9Bf9PkW4wgWXu69XXA6zr0dejr0Nehr0Pf7w7PBLfDsyY4HfI69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69N0O95lg3w4H6tDXoa9DX4e+Dn0d+h6tMzE9MLfjigAAAABJRU5ErkJggg==">
      </div>

      <div class="four-images-image2">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAACVBMVEX///8DAQQAAABKx2UUAAABG0lEQVR4nO3PQQ3AMBDAsLb8QY9Bf9PkW4wgWXu69XXA6zr0dejr0Nehr0Pf7w7PBLfDsyY4HfI69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69N0O95lg3w4H6tDXoa9DX4e+Dn0d+h6tMzE9MLfjigAAAABJRU5ErkJggg==">
      </div>

      <div class="four-images-image3">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAACVBMVEX///8DAQQAAABKx2UUAAABG0lEQVR4nO3PQQ3AMBDAsLb8QY9Bf9PkW4wgWXu69XXA6zr0dejr0Nehr0Pf7w7PBLfDsyY4HfI69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69N0O95lg3w4H6tDXoa9DX4e+Dn0d+h6tMzE9MLfjigAAAABJRU5ErkJggg==">
      </div>
    </div>

Answer 1

If I understand your question, you want your images to resize down when you scale the viewport width down so it doesn't overflow/clip off the screen while maintaining the image aspect-ratio. To do that, you want to actually modify the width of the image, not just the object-fit. Object-fit fits it within a certain dimension, but doesn't modify said dimension. I've condensed your code down a little, but you can still use it with your own classes/ids as you see fit.

.four-images{
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
}

.four-images-image img{
  display: block;
  max-width: 100%;
  height: auto
}

    <div class="four-images">
      <div class="four-images-image">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAACVBMVEX///8DAQQAAABKx2UUAAABG0lEQVR4nO3PQQ3AMBDAsLb8QY9Bf9PkW4wgWXu69XXA6zr0dejr0Nehr0Pf7w7PBLfDsyY4HfI69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69N0O95lg3w4H6tDXoa9DX4e+Dn0d+h6tMzE9MLfjigAAAABJRU5ErkJggg==">
      </div>

      <div class="four-images-image">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAACVBMVEX///8DAQQAAABKx2UUAAABG0lEQVR4nO3PQQ3AMBDAsLb8QY9Bf9PkW4wgWXu69XXA6zr0dejr0Nehr0Pf7w7PBLfDsyY4HfI69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69N0O95lg3w4H6tDXoa9DX4e+Dn0d+h6tMzE9MLfjigAAAABJRU5ErkJggg==">
      </div>

      <div class="four-images-image">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAACVBMVEX///8DAQQAAABKx2UUAAABG0lEQVR4nO3PQQ3AMBDAsLb8QY9Bf9PkW4wgWXu69XXA6zr0dejr0Nehr0Pf7w7PBLfDsyY4HfI69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69N0O95lg3w4H6tDXoa9DX4e+Dn0d+h6tMzE9MLfjigAAAABJRU5ErkJggg==">
      </div>

      <div class="four-images-image">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAACVBMVEX///8DAQQAAABKx2UUAAABG0lEQVR4nO3PQQ3AMBDAsLb8QY9Bf9PkW4wgWXu69XXA6zr0dejr0Nehr0Pf7w7PBLfDsyY4HfI69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69N0O95lg3w4H6tDXoa9DX4e+Dn0d+h6tMzE9MLfjigAAAABJRU5ErkJggg==">
      </div>
    </div>

To elaborate further, here I add a border to the grid parent and make the image transparent. As you can see, object-fit doesn't actually change the size of your image and it overflows the grid.

/* Just modifying the object-fit */
.parent-grid {
  width: 5%;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  border: 2px solid red;
}

.parent-grid > .parent-img > img {
  opacity: .5;
  object-fit: cover;
}

/* If the width of the image is modified */

.parent-grid-2 {
  width: 5%;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  border: 2px solid red;
}

.parent-grid-2 > .parent-img > img {
  width: 100%;
}

<div class="parent-grid">
  <div class="parent-img">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAACVBMVEX///8DAQQAAABKx2UUAAABG0lEQVR4nO3PQQ3AMBDAsLb8QY9Bf9PkW4wgWXu69XXA6zr0dejr0Nehr0Pf7w7PBLfDsyY4HfI69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69N0O95lg3w4H6tDXoa9DX4e+Dn0d+h6tMzE9MLfjigAAAABJRU5ErkJggg==">
  </div>
</div>
<br>
<div class="parent-grid-2">
  <div class="parent-img">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAACVBMVEX///8DAQQAAABKx2UUAAABG0lEQVR4nO3PQQ3AMBDAsLb8QY9Bf9PkW4wgWXu69XXA6zr0dejr0Nehr0Pf7w7PBLfDsyY4HfI69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69N0O95lg3w4H6tDXoa9DX4e+Dn0d+h6tMzE9MLfjigAAAABJRU5ErkJggg==">
  </div>
</div>