CODEWITHSUNDEEP
htmlcsscss-grid
MichaelvE
MichaelvE

Reputation: 2578

Video tag throwing off css-grid layout

So I have a snippet demonstrating the layout of a page I'm creating using CSS grid. In the first example, I have the grid exactly as I want it. In the second example, I have the exact same layout, but I've included a video in the "promo" cell. But adding the video throws out the grid layout. Note how in the first example, the "promo" cell and the "login" cell are divided 50 50 - that's what I want. But in the seconds example, the video makes the "promo" cell wider than the "login" cell. In fact, it appears that the video is being interpreted as being its own cell in the row. What I want is to have the "promo" cell take up 50% with the video content, and for the "login" cell to remain 50%. Any help with this would be appreciated.

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

Upvotes: 1

Views: 2340

Answers (1)

Vikas Jadhav
Vikas Jadhav

Reputation: 4692

You need to add grid-auto-columns: 1fr; to class .gridWrap

Here is the updated snippet:

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

Upvotes: 1

Related Questions