Currently, I am delving into the world of CSS grid and subgrid. My current project involves creating a simple form with two columns and incorporating a few subgrids.
In my design, the parent grid displays a gap of 1em - both the columns and rows have a proper 1em gap. However, when it comes to the subgrid, only the column gap is visible while the row gap seems to be non-existent, set at 0. I'm unable to pinpoint the root cause of this issue...
I have found a workaround by assigning the subgrid a gap-row of 1em, which does seem to work. Nevertheless, I would prefer to tackle the actual problem head-on in order to understand what exactly triggers this puzzling situation in the first place.
Here's a snippet of the HTML and CSS:
#gridContainer {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 1em;
padding: 1em;
justify-items: left;
}
.subgrid {
display: grid;
grid-template-columns: subgrid;
grid-column: span 2;
justify-items: left;
}<div id="gridContainer">
<div class="subgrid">
<label for="nameCompanyDebt1">Naam onderneming:</label>
<input type="text" id="nameCompanyDebt1" name="nameCompanyDebt1">
<label for="companyDebt1">Zakelijke schuld</label>
<input type="text" id="companyDebt1" name="companyDebt1">
</div>
</div>It has come to my attention that #gridContainer (the parent) lacks grid-template-rows. Therefore, there are no 'rows' to inherit. However, considering that gap: 1em should apply to both columns and rows, this shouldn't pose an issue, right?
I did experiment by adding grid-template-rows to #gridContainer, but this merely led to overlapping/stacking rows.
I also acknowledge the distinction between the parent (#subGrid as an ID) and the subgrid (.subgrid as a class). Surprisingly, the columns function seamlessly despite this difference in naming conventions.