After nesting a subgrid inside a padded subgrid within a grid, I noticed varying behavior across different web browsers.
Chrome/Edge (Windows) | Firefox (Windows) | Safari MacOS |
---|---|---|
https://i.stack.imgur.com/uHlto.png | https://i.stack.imgur.com/SGxuC.png | https://i.stack.imgur.com/QkVIT.png |
This is the provided code snippet:
.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 interpretation aligns best with the intended specifications? The desired outcome is to replicate the behavior observed in Chrome.