how to prevent grid image from getting too big if using 1fr with minmax()

Asked Dec 29 '19 at 08:03

Active Dec 29 '19 at 18:40

Viewed 497 times

This CSS almost does what is needed:

always fill the container 100% so no margin is seen.
resize images to fill the container without media queries or calculations.

but certain screen sizes create a larger image than is wanted

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 6px;
}

the 1fr does great EXCEPT for when the images get too big. If I use minmax(200px, 300px), then most of the time, the margins get too big.

Is there a way to get the benefits of 1fr, but also have a max-width as well? so resizing the images SMALLER is okay, but increasing the image size is not okay.

edited Dec 29 '19 at 18:40

itsMasoud

1,335
2
9
25

asked Dec 29 '19 at 08:03

user1864734

Max-with can be used on the grid cell element itself or img probably in your case. – G-Cyrillus Dec 29 '19 at 08:47
Can you add your code in order to see this? – A. Meshu Dec 29 '19 at 12:22
Hi A. Meshu, https://codepen.io/trynn/pen/jOELKam Looking for zero margins and on mobile screens to have 3 images on a row, – user1864734 Dec 29 '19 at 15:09

how to prevent grid image from getting too big if using 1fr with minmax()

0 Answers0