我创建了一个网格，该网格应成为YouTube播放器。
<style>*,::before,::after {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
font-family: lato,sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 300;
}
.grid {
position: relative;
display: grid;
grid-template-columns: repeat(32,1fr);
grid-template-rows: repeat(54,calc(100vw / 36));
}
.grid section {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.grid section.half {
grid-column: span 16;
grid-row: span 9;
}
.grid section.full {
grid-column: span 32;
grid-row: span 18;
}
.grid section.full>img {
height: 100%;
}
@media only screen and (max-width: 600px) {}
</style><div class="grid">
<section class="full">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/B33PAYoUEUg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section class="half" style="background-image:url(http://i3.ytimg.com/vi/FEnRpy9Xfes/maxresdefault.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 100%;">
Half page width<br>16:9
</section>
<section class="half" style="background-image:url(http://i3.ytimg.com/vi/FEnRpy9Xfes/maxresdefault.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 100%;">
Half page width<br>16:9
</section>
<section class="half" style="background-image:url(http://i3.ytimg.com/vi/FEnRpy9Xfes/maxresdefault.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 100%;">
Half page width<br>16:9
</section>
<section class="half" style="background-image:url(http://i3.ytimg.com/vi/FEnRpy9Xfes/maxresdefault.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 100%;">
Half page width<br>16:9
</section>
</div>
现在我的问题是如何获取要在移动视图的一栏中显示的项目（4个缩略图）。所以一个低于另一个。但是要保持比例。
我刚刚使用CSS Grid了很短的时间，所以请原谅我的经验！
谢谢您，并致以最诚挚的问候！ 本杰明
