Image fitting in css grid

November 9, 2021

I am not really familiar with HTML and CSS and I am having some problems with fixing my problem.

I am trying to fit the picture excatly on the grid and the grid to be visible in the center of the page which actually it is.

I saw that there are a lot of questions about this and I tried to look at the answers the questions got and try to fix my problem but it was actually not working. So I hope anyone can help me with this.

Thank you in advance for your time.

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="grid-container">
        <div class="grid-item"><img src="6.png" class="img"></div>
        <div class="grid-item"></div>
        <div class="grid-item"><img src="3.png" class="img"> </div>
        <div class="grid-item"></div>  
        <div class="grid-item"><img src="3.png" class="img"></div>
        <div class="grid-item"></div>
        <div class="grid-item"><img src="7.png" class="img"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"><img src="2.png" class="img"></div>
        <div class="grid-item"></div> 
        <div class="grid-item"><img src="2.png" class="img"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"><img src="3.png" class="img"></div>
        <div class="grid-item"></div>
        <div class="grid-item"><img src="4.png" class="img"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div> 
        <div class="grid-item"></div>
        <div class="grid-item"><img src="2.png" class="img"></div>
        <div class="grid-item"></div> 
        <div class="grid-item"><img src="5.png" class="img"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"><img src="4.png" class="img"></div>
        <div class="grid-item"></div>
        <div class="grid-item"><img src="4.png" class="img"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"><img src="8.png" class="img"></div>
        <div class="grid-item"></div> 
        <div class="grid-item"><img src="5.png" class="img"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"><img src="5.png" class="img"></div>
        <div class="grid-item"></div>
        <div class="grid-item"><img src="9.png" class="img"></div>  
      </div>
</body>
</html>

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #8B38BE;
  padding: 70px;
  margin: auto;
  width: 700px;

}
.grid-item {
  background-color: #E0E7FF;
  border: 1px solid black;
  padding: 40px;
  text-align: center;
}
.grid-item > img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

>Solution :

Okay you can do it like this:

.grid-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #8B38BE;
  padding: 70px;
  margin: auto;
  width: 700px;

}
.grid-item {
  background-color: #E0E7FF;
  border: 1px solid black;
  padding: 40px;
  text-align: center;
  position:relative;
}
.grid-item > img {
  width: 100%;
  object-fit: cover;
  display: block;
  object-fit: cover;
  position:absolute;
  left: 0;
  top: 0;
  height: 100%;
}

So in this case, you are placing img to be absolute and to have height and width same as grid-item. But then you will add object-fit which will make image fit nicely inside grid-item.