Css grid size help

HTML-CSS
1

?What am I missing or need to adjust so my 6 grid images don’t cover the other images when screen size is changed?
Here is my styling for images and the grid:

img{
width:200px;
max-width:100%;
height: 200px;

    }

.imageGallery{
transform: rotate(270deg);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 5rem;
margin: 10px 0;
padding: 10px auto;
justify-content: center;
}

2 
img {
  width: 200px;
  max-width: 100%;
  height: auto; /* Changing the height to auto */
  aspect-ratio: 1/1; /* Setting the aspect ratio of the images */
}

Allow the height to be more flexible based on the width of the images. You can try adjusting the height to be a percentage of the width using aspect ratio techniques.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.