网格项目的响应式视图，让它们相互叠加

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

网格项目的响应式视图，让它们相互叠加

Responsive view of grid items, getting them on top of each other

html

css

flexbox

responsive-design

css-grid