Inconsistent behavior between browsers with deeply nested subgrid

Question

When I nest a subgrid inside a padded subgrid inside a grid, I get inconsistet behavior between the different browsers.

Chrome/Edge (Windows)	Firefox (Windows)	Safari MacOS

This is the code:

.grid {
  display: grid;
  grid-template-columns: [fullwidth-start] 100px [col1-start] 1fr [col1-end col2-start] 1fr [col2-end col3-start] 1fr [col3-end] 100px [fullwidth-end];
}
.grid .subgrid {
  display: grid;
  grid-column: fullwidth;
  grid-template-columns: subgrid;
}

.pad {
  padding-inline: 200px;
}

.setgap {
  padding-block: 1em;
  background-color: #def;
  display: grid;
  gap: 1em;
  grid-column: fullwidth;
  grid-template-columns: subgrid;
}

.col1_2 {
  background-color: #edf;
  padding: 1em;
  grid-column: col1-start/span 2;
}

.col3 {
  padding: 1em;
  background-color: #fde;
  grid-column: col3;
}

<div class="grid">
  <div class="subgrid pad">
    Padded content<br><br>
    <div class="setgap subgrid">
      <div class="col1_2">
        <h2>1-2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit doloremque, quae qui excepturi saepe blanditiis eveniet minus incidunt asperiores obcaecati repellat tempora doloribus inventore iure labore, neque soluta at ipsa?</p>
      </div>
      <div class="col3">
        <h3>3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsa quas a cumque et impedit accusantium maxime, quis delectus molestiae, alias eveniet.</p>
      </div>
    </div> 
  </div>
</div>


<div class="grid">
  <div class="subgrid">
    Non-padded content<br><br>
    <div class="setgap subgrid">
      <div class="col1_2">
        <h2>1-2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit doloremque, quae qui excepturi saepe blanditiis eveniet minus incidunt asperiores obcaecati repellat tempora doloribus inventore iure labore, neque soluta at ipsa?</p>
      </div>
      <div class="col3">
        <h3>3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsa quas a cumque et impedit accusantium maxime, quis delectus molestiae, alias eveniet.</p>
      </div>
    </div> 
  </div>
</div>

Which one would be the correct behavior as intended by the specifications? I'd like it to be the Chrome behavior.

Answer 1

I'm assuming you want padding specifically for the content so it doesn't touch the columns. So you can set the padding directly on the content block:

.grid {
  display: grid;
  grid-template-columns: 100px 1fr 1fr 1fr 100px;
  row-gap: 1em;
}

.pad {
  padding-inline: 200px;
}

.grid-content {
  grid-column: 1 / -1;
}

.grid .subgrid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.setgap {
  padding-block: 1em;
  background-color: #def;
}

.col1_2 {
  background-color: #edf;
  padding: 1em;
  grid-column: 2 / 4;
}

.col3 {
  padding: 1em;
  background-color: #fde;
  grid-column: 4;
}

<div class="grid">
  <div class="subgrid">
     <div class="grid-content pad">
        Padded content<br><br>
     </div>
    <div class="setgap subgrid">
      <div class="col1_2">
        <h2>1-2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit doloremque, quae qui excepturi saepe blanditiis eveniet minus incidunt asperiores obcaecati repellat tempora doloribus inventore iure labore, neque soluta at ipsa?</p>
      </div>
      <div class="col3">
        <h3>3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsa quas a cumque et impedit accusantium maxime, quis delectus molestiae, alias eveniet.</p>
      </div>
    </div> 
  </div>
  <div class="subgrid">
    <div class="grid-content">
    Non-padded content<br><br>
    </div>

    <div class="setgap subgrid">
      <div class="col1_2">
        <h2>1-2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit doloremque, quae qui excepturi saepe blanditiis eveniet minus incidunt asperiores obcaecati repellat tempora doloribus inventore iure labore, neque soluta at ipsa?</p>
      </div>
      <div class="col3">
        <h3>3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsa quas a cumque et impedit accusantium maxime, quis delectus molestiae, alias eveniet.</p>
      </div>
    </div> 
  </div>
</div>

As for the different behavior across browsers, (if I understand the spec correctly) the size of margins/borders/padding should affect the size of the parent grid's tracks and the grid element's own position subgrid-item-contribution

Answer 2

For one, there are tons of inconsistencies among browsers rendering CSS and not just for subgrid which is still relatively new.

Two, I can't see your browser image examples so I made a fiddle for testing.

https://jsfiddle.net/Ltp4m7fw/

Three, I'm not real familiar with subgrid (yet), so there's probably an even better approach. However, I got it to look the same in Chrome and Firefox (Windows) by overriding a couple grid elements in your CSS.

Perhaps the issue is not declaring width on the inner items? Some browsers are picky about that. I used calc and margin to mimic the layout of "Padded content".

Not exactly sure what you are trying to achieve, but hopefully this gets the ball rolling.

/* Begin Edits */
div.grid, div.setgap.subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
div.setgap.subgrid {
  gap: initial;
  row-gap: 1rem;
  column-gap: 1rem;
}
div.subgrid.pad > span {
  background-color: aqua;
}
div.subgrid > span {
  display: grid;
  grid-column-start: 1;
  grid-column-end: 4;
  width: 100%;
  background-color: violet;
}
div.col1_2 {
  grid-column: 1;
}
div.col3 {
  grid-column: 2;
}
.pad {
  padding: 2.5rem !important;
}
.subgrid:not(.pad) .setgap.subgrid {
  column-gap: initial;
}
.subgrid:not(.pad) .setgap.subgrid .col1_2 {
  width: calc(100% - 5rem);
  margin: 0 auto 0 2.5rem;
}
.subgrid:not(.pad) .setgap.subgrid .col3 {
  width: calc(100% - 5rem);
  margin: 0 2.5rem 0 auto;
}
/* End Edits */

.grid {
  display: grid;
  grid-template-columns: [fullwidth-start] 100px [col1-start] 1fr [col1-end col2-start] 1fr [col2-end col3-start] 1fr [col3-end] 100px [fullwidth-end];
}
.grid .subgrid {
  display: grid;
  grid-column: fullwidth;
  grid-template-columns: subgrid;
}

.pad {
  padding-inline: 200px;
}

.setgap {
  padding-block: 1em;
  background-color: #def;
  display: grid;
  gap: 1em;
  grid-column: fullwidth;
  grid-template-columns: subgrid;
}

.col1_2 {
  background-color: #edf;
  padding: 1em;
  grid-column: col1-start/span 2;
}

.col3 {
  padding: 1em;
  background-color: #fde;
  grid-column: col3;
}

<div class="grid">
  <div class="subgrid pad">
    <span>Padded content</span>
    <div class="setgap subgrid">
      <div class="col1_2">
        <h2>1-2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit doloremque, quae qui excepturi saepe blanditiis eveniet minus incidunt asperiores obcaecati repellat tempora doloribus inventore iure labore, neque soluta at ipsa?</p>
      </div>
      <div class="col3">
        <h3>3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsa quas a cumque et impedit accusantium maxime, quis delectus molestiae, alias eveniet.</p>
      </div>
    </div> 
  </div>
</div>


<div class="grid">
  <div class="subgrid">
    <span>Non-padded content</span>
    <div class="setgap subgrid">
      <div class="col1_2">
        <h2>1-2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit doloremque, quae qui excepturi saepe blanditiis eveniet minus incidunt asperiores obcaecati repellat tempora doloribus inventore iure labore, neque soluta at ipsa?</p>
      </div>
      <div class="col3">
        <h3>3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsa quas a cumque et impedit accusantium maxime, quis delectus molestiae, alias eveniet.</p>
      </div>
    </div> 
  </div>
</div>