Currently, I am in the process of integrating a CSS design that utilizes grid and grid-column into my Angular application. The design itself is quite effective, structured similar to this:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(50px, auto);
grid-gap: 36px 20px;
margin: 0;
}
.single {
width: auto;
border: 1px solid #000;
}
.double {
grid-column: 2 / span 2;
border: 1px solid #000;
}<div class="grid">
<div class="single">a</div>
<div class="double">b</div>
</div>The issue arises when I try to implement this within Angular, as the framework automatically adds tags for components which disrupt the HTML structure. As a result, the actual structure appears like this (with placeholders for the additional Angular tags):
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(50px, auto);
grid-gap: 36px 20px;
margin: 0;
}
.single {
width: auto;
border: 1px solid #000;
}
.double {
grid-column: 2 / span 2;
border: 1px solid #000;
}<div class="grid">
<span>
<span>
<div class="single">a</div>
</span>
</span>
<span>
<span>
<div class="double">b</div>
</span>
</span>
</div>I typically resolve such issues by adjusting Angular settings, but I am exploring if there might be a way to address this without altering the tag structure. Since most of the CSS can tolerate the extra tags, I seek guidance on whether it is possible to instruct the CSS grid/grid-column properties to disregard the presence of additional tags within the DOM tree.