网格项目的响应视图，使它们相互重叠

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部分中添加这两个属性。半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