Images diminishes in size while using grid layout

Hi everyone
I am currently taking “supersimpledev” s HTML-CSS beginner course and now in the grid-layout section but experiencing this image-size issue. When ı set the display as grid and giving the thumbnail image width 100% attribute ımage gets smaller in size.
Why is this happening?
Tnx in advance

<!DOCTYPE html>
<html>
<head>
  <title> youtube clon</title>
  <link rel="stylesheet" href="/styles/youtube.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;700&display=swap" rel="stylesheet">

</head>
<body>
  <input type="text" class="searchbox"  placeholder="Search">

<div class="grid">
  </div>

      <div class="div0"> 
        <div class="div1"> <img class="thumbnail1" src="/images/thumbnail-1.webp" alt="thumbnail-1"></div>
      <div class="div2">
        <div class="div2a"><img  class="profile1" src="/profile pictures/channel-1.jpeg" alt="profile-picture"> </div>
        <div class="div2b">
          <p class="Video-title"> Talking Tech and AI with Google CEO Sundar Pichai!</p>
          <p class="uploader">Marques Brownie </p>
          <p class="stats">3.4M views · 6 months ago</p> 
        </div>
      </div></div>


  <div class="div0"><div class="div1" >
    <img class="thumbnail1" src="/images/thumbnail-2.webp" alt="thumbnail-2">
  </div>
  <div>
    <div class="div2a"><img class="profile1" src="/profile pictures/channel-2.jpeg" alt=" profile-picture"></div>
    <div class="div2b">
      <p class="Video-title">Try Not To Laugh Challange #9</p>
      <p class="uploader">Markplier</p>
      <p class="stats"> 19M views 4 years ago</p>
    </div>
  </div> </div>
</div>

<div class="div0"> 
  <div class="div1"> <img class="thumbnail1" src="/images/thumbnail-1.webp" alt="thumbnail-1"></div>
<div class="div2">
  <div class="div2a"><img  class="profile1" src="/profile pictures/channel-1.jpeg" alt="profile-picture"> </div>
  <div class="div2b">
    <p class="Video-title"> Talking Tech and AI with Google CEO Sundar Pichai!</p>
    <p class="uploader">Marques Brownie </p>
    <p class="stats">3.4M views · 6 months ago</p> 
  </div>
</div></div>


<div class="div0"><div class="div1" >
<img class="thumbnail1" src="/images/thumbnail-2.webp" alt="thumbnail-2">
</div>
<div>
<div class="div2a"><img class="profile1" src="/profile pictures/channel-2.jpeg" alt=" profile-picture"></div>
<div class="div2b">
<p class="Video-title">Try Not To Laugh Challange #9</p>
<p class="uploader">Markplier</p>
<p class="stats"> 19M views 4 years ago</p>
</div>
</div> </div>


</div>

<div class="div0"> 
  <div class="div1"> <img class="thumbnail1" src="/images/thumbnail-1.webp" alt="thumbnail-1"></div>
<div class="div2">
  <div class="div2a"><img  class="profile1" src="/profile pictures/channel-1.jpeg" alt="profile-picture"> </div>
  <div class="div2b">
    <p class="Video-title"> Talking Tech and AI with Google CEO Sundar Pichai!</p>
    <p class="uploader">Marques Brownie </p>
    <p class="stats">3.4M views · 6 months ago</p> 
  </div>
</div></div>


<div class="div0"><div class="div1" >
<img class="thumbnail1" src="/images/thumbnail-2.webp" alt="thumbnail-2">
</div>
<div>
<div class="div2a"><img class="profile1" src="/profile pictures/channel-2.jpeg" alt=" profile-picture"></div>
<div class="div2b">
<p class="Video-title">Try Not To Laugh Challange #9</p>
<p class="uploader">Markplier</p>
<p class="stats"> 19M views 4 years ago</p>
</div>
</div> </div>





</body>




</html>


.searchbox{
display: block;

}

.div0{
  vertical-align: top;
  display: inline-block;
  margin-left: 10;
}

.div1,.div2{
display: grid;
grid-template-columns:40px 1fr ;

}
.p {
  display: inline-block;
  font-family: Roboto, arial;
  margin-top: 0;
  margin-bottom: 0;
}
.thumbnail1{
  width: 100%;

}
.profile1{
  width:40px;
  border-radius: 25px;
 
}



.div2a,.div2b{
display: inline-block;
vertical-align: top;
margin-top: 3px;



}

.Video-title{
width: 280px;
margin-top: 0px;
font-weight: 550;
line-height: 22px;
font-size: 13;
margin-bottom: 0;
margin-top: 5px;

}

.uploader{
font-size: 14px;

color: rgb(96, 96, 96);
margin-bottom: 5px;


}

.stats{
font-size: 13px;
color: rgb(96, 96, 96);
margin: 0;
line-height: 15px;
}

.div2b{
  margin-left: 5px;
  margin-top: ;
}
.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;


}

I can give my my initial thoughts off the top of my head, the thumbnail image is reducing in size because you have instructed it to take up 100% of its container BUT if the container is smaller than the initial image size, it will be forced to shrink to fit that container.

SuperSimpleDev is great btw, keep going with his videos, very instructive.