Адаптивный вид элементов сетки, размещая их друг над другом - PullRequest
Новая
       60

Адаптивный вид элементов сетки, размещая их друг над другом

0 голосов
/ 06 ноября 2019

Я создал сетку, которая должна стать плеером 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 только в течение короткого времени, так что простите мне мою неопытность!

Спасибо и всего наилучшего! Benjamin

Ответы [ 2 ]

0 голосов
/ 06 ноября 2019

Вы должны добавить эти два свойства в .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

0 голосов
/ 06 ноября 2019

Исходя из текущей разметки, вы можете просто изменить 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>

Вывод:

Mobile Stacking

...