Видеотег, сбрасывающий css-grid layout - PullRequest
Новая
       7

Видеотег, сбрасывающий css-grid layout

0 голосов
/ 30 октября 2018

Итак, у меня есть фрагмент, демонстрирующий макет страницы, которую я создаю с использованием CSS-сетки. В первом примере у меня есть сетка точно так, как я хочу. Во втором примере у меня точно такой же макет, но я включил видео в ячейку «промо». Но добавление видео выбрасывает макет сетки. Обратите внимание, как в первом примере ячейка «промо» и ячейка «логин» разделены на 50 на 50 - это то, что я хочу. Но во втором примере видео делает ячейку «промо» шире, чем ячейку «логин». Фактически, кажется, что видео интерпретируется как отдельная ячейка в ряду. Я хочу, чтобы ячейка «промо» занимала 50% видео контента, а ячейка «логин» оставалась 50%. Любая помощь с этим будет оценена. 

.gridWrap {
  display: grid;
  grid-template-areas: 'header header''promo login''footer footer';
  grid-template-rows: 40% auto 10%;
  grid-gap: 10px;
  min-height: 100vh;
}

.header {
  background-color: indianred;
  grid-area: header;
}

.promo {
  background-color: aquamarine;
  grid-area: promo;
}

.login {
  background-color: coral;
  grid-area: login;
}

.footer {
  background-color: teal;
  grid-area: footer;
}
<h1>First example</h1>
<div class="gridWrap">
  <div class="header"></div>

  <div class="promo">
  </div>
  <div class="login"></div>

  <div class="footer"></div>
</div>



<h1>Second example</h1>
<div class="gridWrap">
  <div class="header"></div>

  <div class="promo">
    <video autoplay muted loop width="178px" height="100px">
					<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
					Your browser does not support HTML5 video.
				</video>
  </div>
  <div class="login"></div>

  <div class="footer"></div>
</div>

1 Ответ

0 голосов
/ 30 октября 2018

Вам нужно добавить grid-auto-columns: 1fr; в класс .gridWrap

Вот обновленный фрагмент: 

.gridWrap {
  display: grid;
  grid-template-areas: 'header header''promo login''footer footer';
  grid-template-rows: 40% auto 10%;
  grid-gap: 10px;
  min-height: 100vh;
  grid-auto-columns: 1fr;
}

.header {
  background-color: indianred;
  grid-area: header;
}

.promo {
  background-color: aquamarine;
  grid-area: promo;
}

.login {
  background-color: coral;
  grid-area: login;
}

.footer {
  background-color: teal;
  grid-area: footer;
}

</style>
<h1>First example</h1>
<div class="gridWrap">
  <div class="header"></div>

  <div class="promo">
  </div>
  <div class="login"></div>

  <div class="footer"></div>
</div>



<h1>Second example</h1>
<div class="gridWrap">
  <div class="header"></div>

  <div class="promo">
    <video autoplay muted loop width="178px" height="100px">
					<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
					Your browser does not support HTML5 video.
				</video>
  </div>
  <div class="login"></div>

  <div class="footer"></div>
</div>
...