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;
}

user_4942307 · Answer

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
}

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%;
}

Keep grid fields to 100% screen width

1 Answers