CODEWITHSUNDEEP
cssgrid-layoutcss-grid
Frank
Frank

Reputation: 2220

Using percentage padding trick to maintain aspect ratio causes overflow in CSS Grid

I am using padding-top to force the aspect ratio of a div to 16:9. The contents of the div are positioned absolutely and expand to fill the div.

HTML:

<div class = "ratio-16-9">
  <p>This p element is in a div with an aspect ratio of 16:9.</p>
</div>

CSS:

.ratio-16-9 {
  padding-top:56.25% /* Yields 16:9 aspect ratio. */;
  position:relative;
}

.ratio-16-9 > p {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}

It works nicely to achieve the aspect ratio, but the div is overflowing my CSS Grid container for some reason.

Here is a fiddle with the working example of the problem: https://jsfiddle.net/uo63yyer/30/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  width: 100%;
}

body {
  background-color: #404040;
  min-height: 100%;
  width: 100%;
}

p {
  color: #f0f0f0;
  text-align: center;
}

#content {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto;
}

.topic {
  background-color: #808080;
  min-height: 100px;
  margin: 8px;
  padding: 8px;
}

.ratio-16-9 {
  background-color: #0080f0;
  padding-top: 56.25%;
  /* If you comment out the line above and uncomment the line below, things work propperly, but the aspect ratio is not maintained. */
  /*height:300px;*/
  position: relative;
}

.ratio-16-9>p {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
<div id="content">

  <div class="topic">
    <div class="ratio-16-9">
      <p>This p element is in a div with an aspect ratio of 16:9.</p>
    </div>
  </div>

  <div class="topic">
  </div>

  <div class="topic">
  </div>

  <div class="topic">
    <div>
      <!-- Uncomment the line below and things work propperly. -->
      <!--<p>This p element is in a propperly sized div and it works as one might expect it to.</p>-->
    </div>
  </div>

</div>

Upvotes: 2

Views: 1485

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371113

The problem appears to be the use of auto to size the grid column:

#content {
  display:grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto;
}

Percentage padding is calculated with respect to the width of the containing block (spec).

For whatever reason, the auto value is being ignored for this purpose by the browser.

If you switch from auto to fr units, the layout works as intended.

#content {
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows:auto auto auto auto;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  width: 100%;
}

body {
  background-color: #404040;
  min-height: 100%;
  width: 100%;
}

p {
  color: #f0f0f0;
  text-align: center;
}

#content {
  display: grid;
  /* grid-template-columns:auto; */
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
}

.topic {
  background-color: #808080;
  min-height: 100px;
  margin: 8px;
  padding: 8px;
}

.ratio-16-9 {
  background-color: #0080f0;
  padding-top: 56.25%;
  /* If you comment out the line above and uncomment the line below, things work propperly, but the aspect ratio is not maintained. */
  /*height:300px;*/
  position: relative;
}

.ratio-16-9>p {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
<div id="content">
  <div class="topic">
    <div class="ratio-16-9">
      <p>This p element is in a div with an aspect ratio of 16:9.</p>
    </div>
  </div>
  <div class="topic"></div>
  <div class="topic"></div>
  <div class="topic">
    <div>
      <!-- Uncomment the line below and things work propperly. -->
      <!--<p>This p element is in a propperly sized div and it works as one might expect it to.</p>-->
    </div>
  </div>
</div>

https://jsfiddle.net/uo63yyer/31/

Also, be aware that using percentage-based padding on grid items may render differently across browsers. Percentage padding on grid item being ignored in Firefox

Upvotes: 2

Related Questions