这是我在 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 · 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>
您可以查看媒体查询:此处 此 CSS 函数处理屏幕尺寸。 通过设置几个不同的“断点”,您可以修改网格模板列
类似这样的事情:
@media (max-width: 1250px) {
.video-grid {
grid-template-columns : repeat(2, 1fr)
}
}
您可以调整断点的大小,并添加其他媒体查询以使您的网格响应。
只需“覆盖”与屏幕尺寸相比的属性。