CSS GRID IMAGE GALLERY: How to resize all images to be the same size and maintain the same distance?
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?
Answer
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.