Question

因此，我有一个代码段演示了我正在使用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>

Answer 1

您需要将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>

视频标记退出CSS网格布局

1 个答案: