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

Question

I have created a grid which should become a YouTube player.

<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>

Now my question would be how to get the items (the 4 thumbnails) to be displayed in a column in the mobile view. So one below the other. But keep ratio.

I have only been working with CSS Grid for a short time, so forgive me my inexperience!

Thank you and best regards! Benjamin

Answer 1

Based on your current markup, you can just alter the grid-column to occupy additional grid cells. Double the amount i.e. 32 in this case because span 16 occupies half of the grid column.

Added Code:

@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>

Output: