我创建了一个应该成为 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 个缩略图)显示在移动 View 的列中。所以一个在另一个下面。但保持比例。
我使用 CSS Grid 的时间很短,所以请原谅我的经验不足!
谢谢您,并致以最诚挚的问候! 本杰明
最佳答案
根据您当前的标记,您只需更改 grid-column
占用额外的网格单元。将数量加倍,即在本例中为 32,因为跨度 16 占据了网格列的一半。
添加代码:
@media only screen and (max-width: 600px) {
.grid section.half {
grid-column: span 32;
}
}
<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) {
.grid section.half {
grid-column: span 32;
}
}
</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>
输出:
关于html - 网格元素的响应式 View ,让它们相互叠加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58725792/