网格项目的响应式视图，使它们彼此重叠

Question

我创建了一个应该成为 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 的时间很短，所以请原谅我的经验不足！

谢谢你和最好的问候！ 本杰明

Answer 1

根据您当前的标记，您可以更改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>

输出：

Answer 2

你必须在.grid section.half中添加这两个属性grid-column: span 32;和grid-row: span 18;

@media only screen and (max-width: 600px) {
 .grid section.half {
   grid-column: span 32;
  grid-row: span 18;
 }
}

codepen