当我最小化窗口时，网格的第三列不会转换为网格的第一行

问题描述 投票：0回答：1

这是我在 Stackoverflow 上的第一篇文章。我是一个完全的初学者，正在观看这个关于“Html/CSS by SuperSimpleDev”的视频。所以我正在克隆 YouTube 主页。 SuperSimpleDev 的教程使用“grid-template-columns: 1fr 1fr 1fr”来制作我们需要做的事情，以完成我在标题中要求的事情。但是当我编写代码时，我没有得到与他相同的结果。 我期望当我最小化窗口时，网格的第三列转换为网格的第一行，但它没有发生，当我尝试最小化窗口时，网格的第三列不会转换为网格的第一行，并且YouTube 视频的元素和标题随窗口一起最小化。 我已附上代码。请帮助我。

<!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 &#183; 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 &#183; 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 &#183; 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 &#183; 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 &#183; 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 &#183; 1 year ago</p>
            </div> 
          </div>
      </div>
    </div> 
  </body>
</html>
html css css-grid
1个回答
0
投票

您可以查看媒体查询：此处 此 CSS 函数处理屏幕尺寸。 通过设置几个不同的“断点”，您可以修改网格模板列

类似这样的事情：

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

您可以调整断点的大小，并添加其他媒体查询以使您的网格响应。

只需“覆盖”与屏幕尺寸相比的属性。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.