Images diminishes in size while using grid layout

HTML-CSS
1

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;


}
2

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.

3

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

4

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