2

This codepen creates a grid of red cells 100*50 px on Chrome. This is the expected behavior.

enter image description here

#grid{
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 100px 100px;
}
.cell{
  background-color: red;
  padding-bottom: 50%;
}
<div id="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

Firefox 52 completely ignores the padding-bottom: 50%; and I don't know why.

I can't find any workaround. Can someone please help me?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Ploppy
  • 14,810
  • 6
  • 41
  • 58
  • Your padding appears to be the same in both Chrome and Firefox. Can you please clarify exactly what the problem is? – Obsidian Age Mar 10 '17 at 01:04
  • Do you see a grid of red cells 100x50px on firefox ? Firefox 52 gives me nothing, I only have the grid gap of 8px. No red cells at all. – Ploppy Mar 10 '17 at 01:05
  • Firefox 51.0.1 (the latest version of Firefox) shows me the red cells. Are you sure you have Firefox 52? Did you get a beta? That may be the problem. – Obsidian Age Mar 10 '17 at 01:08
  • Firefox 52, it's not a beta though. Is it a bug ? Because I tested and firefox does not ignore this padding-bottom outside of a grid. – Ploppy Mar 10 '17 at 01:09
  • Weird, 52 came out three days ago, but my 51.0.1 reports being up to date. Anyway, it may be difficult to tell if the padding is being applied, as the CodePen is going to be completely solid regardless of whether you have padding or not. Padding **includes** the background colour; you may be looking for **margin-bottom** instead. Also, the percentage is relative to the **element's content area**. As you don't explicitly provide this, you may get weird results. Maybe Firefox 52 attempts to 'correct this'. – Obsidian Age Mar 10 '17 at 01:13
  • Here is the test: https://jsfiddle.net/rLorj6oh/ Working on FF 52. – Ploppy Mar 10 '17 at 01:13
  • I'm allocating an area to render an image in a tile with a specif ratio, the only way I know to do it is to use padding-bottom, and then use absolute position on the image. – Ploppy Mar 10 '17 at 01:16

2 Answers2

4

From the spec:

6.4. Grid Item Margins and Paddings

Authors should avoid using percentages in paddings or margins on grid items entirely, as they will get different behavior in different browsers.

Here's the full section:

As adjacent grid items are independently contained within the containing block formed by their grid areas, the margins of adjacent grid items do not collapse.

Percentage margins and paddings on grid items can be resolved against either:

  • their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
  • the inline axis (left/right/top/bottom percentages all resolve against width)

A User Agent must choose one of these two behaviors.

Note: This variance sucks, but it accurately captures the current state of the world (no consensus among implementations, and no consensus within the CSSWG). It is the CSSWG’s intention that browsers will converge on one of the behaviors, at which time the spec will be amended to require that.

Authors should avoid using percentages in paddings or margins on grid items entirely, as they will get different behavior in different browsers.

Auto margins expand to absorb extra space in the corresponding dimension, and can therefore be used for alignment.

Flexbox, another CSS3 technology, has the same problem.

Here's how I implemented the padding-bottom trick for a video nested in a flex container (see last bullet point): https://stackoverflow.com/a/39310591/3597276

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • So does it mean it is impossible to create a grid of cells with a specif ratio ? – Ploppy Mar 10 '17 at 01:19
  • It means that you should forget about using percentage padding or margin on grid items for now, if you want your layout to work across browsers. – Michael Benjamin Mar 10 '17 at 01:20
  • Weird thing is that it apparently worked on FF 51 according to the question's comments. – Ploppy Mar 10 '17 at 01:22
  • The primary issue, according to the spec, isn't that it works or doesn't work. It's that the implementation is inconsistent across browsers. – Michael Benjamin Mar 10 '17 at 01:25
  • It's more complicated than that, I want a specific ratio with dynamic size, here is what it looks like http://codepen.io/anon/pen/xqgrqj . But the only way I know to reserve the area of an image while it loads is to use the padding bottom trick on its container, and put the image in absolute position inside it. – Ploppy Mar 10 '17 at 01:33
  • The traditional way of reserving an image's space while a page loads is to use the `width` and `height` attributes in the `img` tag. http://stackoverflow.com/q/32217863/3597276 – Michael Benjamin Mar 10 '17 at 01:36
  • You'll never achieve a responsive design if you use static width and height. – Ploppy Mar 10 '17 at 01:38
  • The link I posted in my last comment covers that. There are multiple views on that issue. I don't think "never" is correct. But more importantly, you can't use percentage padding on grid items. End of story. So take a look at my other answers and the referenced links for some options. – Michael Benjamin Mar 10 '17 at 01:40
  • Grid layout is brand new. Barely out of the box. Can't do everything (yet). – Michael Benjamin Mar 10 '17 at 01:42
  • Even though what you are saying is probably true, that it can't be done right now. I will keep the question open for a while to see if someone comes with a solution to this inconsistent implementation across browsers. – Ploppy Mar 10 '17 at 01:50
  • Yes. I agree. You should definitely keep the question open, as somebody may know a good workaround. – Michael Benjamin Mar 10 '17 at 01:52
0

I found a solution: I had to add a wrapper to the cell with a 'width: 100%' rule and it finally works on Firefox 52!

#grid{
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 100px 100px;
}
.cell{
  width: 100%;
}
.inner{
  background-color: red;
  padding-bottom: 50%;
}
<div id="grid">
  <div class="cell">
    <div class="inner"></div>
  </div>
  <div class="cell">
    <div class="inner"></div>
  </div>
  <div class="cell">
    <div class="inner"></div>
  </div>
  <div class="cell">
    <div class="inner"></div>
  </div>
</div>

It's probably a temporary solution which is subject to change due to the CSS grid being brand new.

Ploppy
  • 14,810
  • 6
  • 41
  • 58