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.

Auklet

Seems like a difference with the grid-template-columns: [fullwidth-start] 100px [col1-start] 1fr [col1-end col2-start] 1fr [col2-end col3-start] 1fr [col3-end] 100px [fullwidth-end]; where each of the browsers determine what "grid column" is for the subgrid when padded or not with your shortcutpadding-inline: 200px; which is padding-inline-start: 200px; padding-inline-end 200px; SO perhaps there is no "intended" except for the browser developer and the interpretation pulled from the spec. – Banana

I also do not have those browsers so I might see what .grid >.subgrid vs your .grid .subgrid might do here given the nested subgrid in the subgrid – Banana

Answer 1

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>

Regin

Consider using a snippet with the CSS as the OP did in the question - you can even copy to an answer right from that. – Banana

Old habits die hard! Snippet added. – Regin

Trying to sort my brain out on this one but it kind of feels like the column count differs from the OP markup/css here - but it is quite late in the day for me... – Banana

I think you are correct Schultheiss. Now that I see the images, looks like Firefox is not rendering the third column. My code just uses two. The OP requirement is not clear. What is the intention here, to force three columns? – Regin

As posted it is just a question not a "How can I make all browsers look like Chrome" - which is the "implied" but not asked question per se - part of why I commented rather than adding an answer but who knows really. – Banana

Yea, I didn't want to answer at first either, but I did want to add some code to help figure out the OP's intention. – Regin

Answer 2

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

Loosestrife