I'm having trouble positioning descendants in a root grid while they are enclosed in a container with display: contents.
The issue I am facing is that one element is not being correctly placed within the grid:
.wrapper {
width: 80ch;
margin: auto;
margin-top: 4rem;
}
p {
margin-block-start: 0px;
}
as-question {
--font-size: 12pt;
--spacing: 8px;
width: 100%;
display: grid;
font-size: var(--font-size, 12pt);
gap: var(--spacing, 8px);
grid-template-columns: [question-number-start] 10mm [question-number-end part-number-start question-content-start] 1.75rem [part-number-end part-content-start subpart-number-start] 1.75rem [subpart-number-end subpart-content-start] auto [part-content-end subpart-content-end question-content-end marks-start] 2rem [marks-end question-end];
}
as-question:before {
grid-column: question-number-start/question-number-end;
content: "1.";
counter-reset: part subpart;
}
as-question .content {
display: contents;
}
as-question > div.content > :not(as-part):not(as-subpart) {
grid-column: question-content-start/question-content-end;
}
as-question as-marks {
grid-column: marks-start/marks-end;
}
as-question as-part {
display: contents;
}
as-question as-part:before {
counter-reset: subpart;
counter-increment: part;
grid-column: part-number-start/part-number-end;
content: "(" counter(part, lower-alpha) ")";
text-align: right;
}
as-question as-part > div.content > :not(as-subpart) {
grid-column: part-content-start/part-content-end;
}
as-question as-part as-marks {
color: red;
}
as-question as-subpart {
display: contents;
}
as-question as-subpart:before {
counter-increment: subpart;
grid-column: subpart-number-start/subpart-number-end;
content: "(" counter(subpart, lower-roman) ")";
text-align: right;
}
as-question as-subpart > div.content * {
grid-column: subpart-content-start/subpart-content-end;
}
as-question as-subpart as-marks {
color: blue;
}<as-question>
<div class='content'>
<p>This is some question content</p>
<as-part>
<as-marks>2</as-marks>
<div class='content'>
<p>Part: How can I not be pushed down?</p>
<as-subpart>
<as-marks>1</as-marks>
<div class='content'>
<p>Subpart</p>
</div>
</as-subpart>
<as-subpart>
<as-marks>1</as-marks>
<div class='content'>
<p>Subpart</p>
</div>
</as-subpart>
</div>
</as-part>
<as-part>
<as-marks>6</as-marks>
<div class='content'>
<p>Part</p>
<as-subpart>
<as-marks>4</as-marks>
<div class='content'>
<p>Subpart</p>
</div>
</as-subpart>
<as-subpart>
<as-marks>2</as-marks>
<div class='content'>
<p>Subpart</p>
</div>
</as-subpart>
</div>
</as-part>
</div>
</as-question>Every time I insert an
<as-marks>{number}</as-marks><div class='content'> (which has display: contents;), the first child of <div class="content">https://i.stack.imgur.com/VTAlM.png
Is there a way to ensure the first child of <div class='content'> is placed on the same line as the marks?
Although I could revert to using grids within grids within grids, this approach seemed more organized. Looking forward to the implementation of subgrid.
If you're wondering about the unconventional HTML structure, it's because I aim to utilize Prosemirror with custom NodeViews, and this is how Prosemirror structures the resulting HTML.