Since subgrids are not supported at all, as of writing this answer, on browsers other than latest Firefox v71, and even if other browsers would start supporting it, still, users with older versions will be left behind for at least a year until enough users upgrade their browsers to be able to use such a new feature.
I've devised a method for aligning deeply-nested grid elements on an ancestor grid:
At its essence, this solution is about applying display:contents to all nested elements of the grid, up to the ones wished to be used as the grid items, which effectively does an inverse-inheritance, so every element set with display:contents is actually projecting its child's display, so ultimately the deeply-nested elements are treated as if they were direct children of the .container element.
.container {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
max-width: 500px;
margin: auto;
}
.container div{
display: contents; /* <-- makes the div elements "transparent" to the grid */
}
input{ height: 40px; }
label{ align-self: center; }
<div class="container">
<div>
<div>
<div>
<label contenteditable>very long label</label>
<input>
</div>
</div>
</div>
<div>
<div>
<div>
<label contenteditable>short</label>
<input>
</div>
</div>
</div>
</div>
This is treated by the browser as if:
<div class="container">
<label contenteditable>very long label</label>
<input>
<label contenteditable>short</label>
<input>
</div>
In the above example the labels are editable to showcase the dynamic nature of the grid tracks, so all grid items are aligned.
display:contentsfor the child whose children should be placed in the grid, but it's currently supported only by Firefox, WebKit TP, and Chrome behind the flag. – Degrading