Html Question posted in
Some basic documentation can be found here.

Html – 3rd column of Grid doesn't convert to 1st row of grid when I minimize the window

this is my first post on Stackoverflow. I am a complete beginner and watching this video on "Html/CSS by SuperSimpleDev". So I am making a clone of YouTube home page. The tutorial by SuperSimpleDev used "grid-template-columns: 1fr 1fr 1fr" to make the required thing we needed to do the thing I asked in the Title. But when I wrote the code, I’m not getting the same result as him.
I was expecting that the 3rd column of Grid convert to 1st row of grid when I minimize the window but it doesn’t happen and when I try to do minimize the window the 3rd column of Grid doesn’t convert to 1st row of grid and the elements and title of the YouTube video gets minimized with the window altogether.
I have attached the code. Please help me.

<!DOCTYPE html>
<html>
  <head>
    <title>Example Grids</title>
   
    <style>

      .video-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 16px;
        row-gap: 40px;
      }

      .thumbnail {
        width: 100%;
        border-radius: 5px;
      }

      .video-profile-info {
        display: grid;
        grid-template-columns: 50px 1fr;
      }

      .video-thumbnail {
        margin-bottom: 10px;
      }

      .profile {
        width: 40px;
        border-radius: 30px;
      }

      .video-info {
        width: 100%;
      }

      p {
        font-family: Roboto;
      }

      .title {
        font-weight: 500;
        margin-bottom: 10px;
      }

      .stats {
        margin-top: 2px;
      }

      .stats,
      .author {
        font-size: 13px;
        color: rgb(96,96,96);
      }

    </style>
  </head>
  <body>
    <div class="video-grid">
      <div class="video-card">
        <div class="video-thumbnail">
          <img class="thumbnail" src="thumbnails_youtube/thumbnail-1.webp">
        </div>
          <div class="video-profile-info">
            <div class="video-profile">
              <img class="profile" src="thumbnails_youtube/channel-1.jpeg">
            </div>
            <div class="video-info">
              <p class="title">Talking Tech and AI with Google CEO Sundar Pichai!</p>            
              <p class="author">Marques Brownlee</p>
              <p class="stats">3.4M views · 6 months ago</p>
            </div> 
          </div>     
      </div>
  
      <div class="video-card">
        <div class="video-thumbnail">
          <img class="thumbnail" src="thumbnails_youtube/thumbnail-2.webp">
        </div>
          <div class="video-profile-info">
            <div class="video-profile">
              <img class="profile" src="thumbnails_youtube/channel-2.jpeg">
            </div>
            <div class="video-info">
              <p class="title">Try Not To Laugh Challenge #9</p>            
              <p class="author">Markiplier</p>
              <p class="stats">19M views · 4 years ago</p>
            </div> 
          </div>
      </div>
  
      <div class="video-card">
        <div class="video-thumbnail">
          <img class="thumbnail" src="thumbnails_youtube/thumbnail-3.webp">
        </div>
          <div class="video-profile-info">
            <div class="video-profile">
              <img class="profile" src="thumbnails_youtube/channel-3.jpeg">
            </div>
            <div class="video-info">
              <p class="title">Crazy Tik Toks Taken Moments Before DISASTER</p>            
              <p class="author">SSSniperWolf</p>
              <p class="stats">12M views · 1 year ago</p>
            </div> 
          </div>
      </div>
  
      <div class="video-card">
        <div class="video-thumbnail">
          <img class="thumbnail" src="thumbnails_youtube/thumbnail-4.webp">
        </div>
          <div class="video-profile-info">
            <div class="video-profile">
              <img class="profile" src="thumbnails_youtube/channel-4.jpeg">
            </div>
            <div class="video-info">
              <p class="title">The Simplest Math Problem No One Can Solve - Collatz Conjecture</p>            
              <p class="author">Veritasium</p>
              <p class="stats">18M views · 4 months ago </p>
            </div> 
          </div>  
      </div>
  
      <div class="video-card">
        <div class="video-thumbnail">
          <img class="thumbnail" src="thumbnails_youtube/thumbnail-5.webp">
        </div>
          <div class="video-profile-info">
            <div class="video-profile">
              <img class="profile" src="thumbnails_youtube/channel-5.jpeg">
            </div>
            <div class="video-info">
              <p class="title">Kadane's Algorithm to Maximum Sum Subarray Problem</p>            
              <p class="author">CS Dojo</p>
              <p class="stats">519K Views · 5 year ago</p>
            </div> 
          </div>
      </div>
  
      <div class="video-card">
        <div class="video-thumbnail">
          <img class="thumbnail" src="thumbnails_youtube/thumbnail-6.webp">
        </div>
          <div class="video-profile-info">
            <div class="video-profile">
              <img class="profile" src="thumbnails_youtube/channel-6.jpeg">
            </div>
            <div class="video-info">
              <p class="title">Anything You Can Fit In The Circle I'll Pay For</p>            
              <p class="author">MrBeast</p>
              <p class="stats">141M views · 1 year ago</p>
            </div> 
          </div>
      </div>
    </div> 
  </body>
</html>
Tags:

4

Answers


  1. 0

    You can check Media Queries : HERE
    This CSS function handle screen size.
    By setting a few different "Breakpoints" you can modify the grid-template-column

    Something like this :

    @media (max-width: 1250px) { 
      .video-grid {
          grid-template-columns : repeat(2, 1fr)
       }
    }

    You can adjust size of breakpoints, and add others media queries ton make your Grid responsive.

    SImply "override" the property compared to the screensize.

    Login or Signup to reply.
  2. 0

    you need to add a meta tag for the viewport in the <head> to enable responsiveness on smaller devices.

    <meta name="viewport" content="width=device-width, initial-scale=1">

    After that, you can use media queries to style your page for smaller screens.

    @media screen and (max-width: 768px) {  
   .video-grid {
       grid-template-columns: 1fr 1fr; /* Two columns for smaller screens */
   }
}
@media screen and (max-width: 480px) {
   .video-grid {    
       grid-template-columns: 1fr; /* Single column for very small screens */
   }   
}
    Login or Signup to reply.
  3. 0

    Add this line of code inside styles tag.

    @media screen and (min-width : 720px){
 .video-grid {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 200px 200px 200px
        column-gap: 0px;
        row-gap: 40px;
      }
}

    You can modify the device min width, and height of each row.

    Login or Signup to reply.
  4. 0

    1fr will always take 1 fraction no matter how narrow or wide the surrounding container is. So if you have 1 fraction 3 times for the columns they will basically always be 33.33% wide. You can use media queries to change the amount of columns or use auto-fit / auto-fill.

    Example 1 using media-queries

    .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;  
}

.box {
  height: 200px;
  width: 100%;
  background: red;
}

@media screen and (max-width: 500px) {
  .grid {
    grid-template-columns: 1fr;
  }
}
    <div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

    Example 2 using auto-fit

    .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;  
}

.box {
  height: 200px;
  width: 100%;
  background: red;
}
    <div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

    The repeat(auto-fit, minmax(200px, 1fr)) value basically means, fit as many elements in this row as possible if they are all at least 200 pixels in width and stretch them until another element with 200 pixels in width fits in the same row. You can play around by changing auto-fit to auto-fill, it has a little different behavior, you have to check what suits your needs best.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search