Tested using version 129.0.6668.59 of Chrome for Windows. Chrome seems to crash every time I try to use subgrid and container queries together.
.comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.comparison-item {
container-type: inline-size;
display: grid;
grid-template-rows: subgrid;
}
button {
@container (min-width: 460px) {
position: absolute;
bottom: 2rem;
right: 2rem;
}
}<div class="comparison-grid">
<div class="comparison-item ">
<p>Item number 1</p>
<button>test</button>
</div>
<div class="comparison-item">
<p>Item number 2</p>
<button>test</button>
</div>
</div>The Error Message
2
Based on below observations and workarounds, I’m guessing the bug is due to subgrid trying to control the layout within a inline-size/size container and the container is not letting it, which then crashes the rendering program. Interestingly if we just set the containment of the container to inline-size without making it a inline-size query container it won’t crash the page, so there must be something else going on causing this problem when making an element a query container. Hence, it might be better to report an issue with Chromium instead of hacking the CSS.
In older Chrome versions such as Chrome 128, though not crashing, the layout within the container simply won’t be affected by the subgrid.
Following this observation, in Chrome 129.0.6668.59 (64bit), you can see that if you add a layout containment via contain, it will behave like older versions that the subgrid won’t be laying out the child elements within it, and the program won’t crash anymore.
One interesting thing is that if you remove layout after the size is calculated via JS, both the reflowed result and the container will behave as expected while not crashing the page.
Note that this is not intended to be a solution but to demonstrate my observation. If you really need to acheive the same result you proably should consider other layout modules or combining some JS.
window.addEventListener("load", function() {
var list = document.querySelectorAll(".comparison-item");
for (let el of list) {
el.style.setProperty('contain', 'inline-size');
}
});.comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.comparison-item {
grid-row: span 3;
container-type: inline-size;
contain: inline-size layout;
display: grid;
grid-template-rows: subgrid;
.span-two {
grid-row: span 2;
}
}
button {
@container (max-width: 460px) {
color:blue;
}
}<div class="comparison-grid">
<div class="comparison-item ">
<p class="span-two">Spanning 2 Rows</p>
<button>Spanning 1 Row</button>
</div>
<div class="comparison-item">
<p>Spanning 1 Row</p>
<button class="span-two">Spanning 2 Rows</button>
</div>
</div>
Ok, there seems to be some issue with chrome 129, with layouts and all. Can’t get much information but this layout might be heloful
https://support.google.com/chrome/thread/297477809/chrome-update-from-128-to-129-causing-application-to-break?hl=en
Though, this shows that subgrid is supported on Chrome 129, but just keep looking out for it.
https://caniuse.com/?search=subgrid