CSS GRID IMAGE GALLERY: How to resize all images to be the same size and maintain the same distance?

Question

Just trying to create a simple image gallery that's 3 x 3 using CSS grid. I thought using a container with the following css styles would resize them all equally:

.portfolio {
  display: grid;
  grid-template-rows: repeat(3, 200px);
  grid-template-columns: repeat(3, 200px);
  grid-gap: 20px; 
  justify-content: center;
  padding: 10%;
}

But all the images appear on my browser overlapping and different sizes. Now I can take the long, very messy approach and start resizing everything, I guess. But isn't there an easy way just to resize all of them to be equal?

You should post enough code in your question so that we can reproduce the problem. Without the HTML, images, and all relevant CSS, it's a guessing game. — Michael Benjamin, Jun 24 '18 at 12:42

score 3 · Answer 1 · answered Jun 24 '18 at 03:27

I understand CSS Grid is a new way of doing things and appreciate your effort in trying out new stuff. First of all , I would like to suggest you to go through this free training on CSS grid CSS Grid tutorial. This would give you a basic idea about all the syntax.

Second point, once you are familiar with the concepts, I think this (CSS grid tricks) would be the best guide for you to step into it deeper.

Now coming to your question. I've attached the snippet which basically does a portfolio kind of a thing where it is fitting the images inside the particular grids.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .portfolio {
            display: grid;
            grid-template-rows: 150px 150px 150px;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 20px;

            grid-template-areas: "img1 img2 img3 img4" "img5 img6 img7 img8" "img9 img10 img11 img12";
        }

        .image1 {
            grid-area: img1;
            text-align: center;
        }

        .image2 {
            grid-area: img2;
            text-align: center;
        }

        .image3 {
            grid-area: img3;
            text-align: center;
        }

        .image4 {
            grid-area: img4;
            text-align: center;
        }

        .image5 {
            grid-area: img5;
            text-align: center;
        }

        .image6 {
            grid-area: img6;
            text-align: center;
        }

        .image7 {
            grid-area: img7;
            text-align: center;
        }

        .image8 {
            grid-area: img8;
            text-align: center;
        }

        .image9 {
            grid-area: img9;
            text-align: center;
        }

        .image10 {
            grid-area: img10;
            text-align: center;
        }

        .image11 {
            grid-area: img11;
            text-align: center;
        }

        .image12 {
            grid-area: img12;
            text-align: center;
        }

        .fit {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="portfolio">

        <div class="image1">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ1">
        </div>
        <div class="image2">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ2">
        </div>
        <div class="image3">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ1">
        </div>
        <div class="image4">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ2">
        </div>
        <div class="image5">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ1">
        </div>
        <div class="image6">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ2">
        </div>
        <div class="image7">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ1">
        </div>
        <div class="image8">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ2">
        </div>
        <div class="image9">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ1">
        </div>
        <div class="image10">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ2">
        </div>
        <div class="image11">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fNl8xNTI5NTY4NjY2XzA3MA/screen-6.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ1">
        </div>
        <div class="image12">
            <img class="fit" src="https://image.winudf.com/v2/image/Y29tLmJhbmRhaW5hbWNvZW50LmRibGVnZW5kc193d19zY3JlZW5fMTRfMTUyOTU2ODY3MF8wNjQ/screen-14.jpg?h=355&fakeurl=1&type=.jpg"
                alt="DBZ2">
        </div>

    </div>

</body>

</html>

Now, you can play around with it by changing the size of the rows or columns(which ever required for your use case). One more point i would like to add is , instead of using align-items: center, if you like to play around with spacing, you can always try it with grid-template-areas by giving . . where ever required.

The possibilities with CSS grid is amazing. Just try out. And hope the solution helped.

You can use max-width and max-height but that will again make the images take different widths depending on the image resolution. — Akshay L, Jun 25 '18 at 06:21

score 0 · Answer 2 · answered Nov 06 '18 at 13:32

This is doing the trick for me. Though the images need to be square for this to work properly.

Kinda weird, but it works in Chrome, Firefox and Edge (IE is not a fan).

Codepen

ul {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: repeat(3, minmax(1px, 100%));
    padding-left: 0;
    list-style: none;
}

img {
  width: 100%;
}

<ul>
    <li><img src="https://via.placeholder.com/350x150" alt="image"></li>
    <li><img src="https://via.placeholder.com/300" alt="image"></li>
    <li><img src="https://via.placeholder.com/150x300" alt="image"></li>
    <li><img src="https://via.placeholder.com/147" alt="image"></li>
    <li><img src="https://via.placeholder.com/200" alt="image"></li>
    <li><img src="https://via.placeholder.com/150" alt="image"></li>
</ul>

CSS GRID IMAGE GALLERY: How to resize all images to be the same size and maintain the same distance?

2 Answers2