I'm new to web development and currently learning HTML and CSS. My goal is to create a portfolio page on my website using a 3-column CSS Grid that fits the page width and is centered. I've managed to display the images with margins, but they are too big, causing the grid to extend beyond the page boundaries because each image is 1000x1000 px.
I want the CSS Grid to resize itself to fit the page width while maintaining the aspect ratio of the images. How can I accomplish this?
Below is the code for my CSS grid named artworkGrid:
.artworkGrid {
display: inline-grid;
float:left;
clear:left;
grid-gap: 5%;
margin: 5%;
max-width: 25%;
grid-template-columns: 33% 33% 33%;
}
Using max-width: 25% somewhat achieves the desired page width, but it's not an ideal solution as it doesn't resize the images within the grid.
I attempted to resize the images themselves with the following CSS:
.artwork {
width: auto;
object-fit: cover;
}
Unfortunately, this approach did not work as expected.