CSS 网格在显示中无序放置项目：内容包装器

Question

我试图将后代放置在根网格中，同时将它们包裹在带有

display: contents

的容器中。

我遇到的问题是一个元素没有放置在网格中的正确位置：

  <as-question>
    <div class='content'>
      <p>This is some question content</p>
      <as-part>

        <!-- Problem element is as-marks below -->
        <as-marks>2</as-marks>
        <div class='content'>
          <p>Part: How can I not be pushed down?</p>
          <as-subpart>

            <!-- Problem element is as-marks below -->
            <as-marks>1</as-marks>
            <div class='content'>
              <p>Subpart</p>
            </div>
          </as-subpart>
        </div>
      </as-part>
    </div>
  </as-question>

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 {
  grid-column: question-content-start/question-content-end;
}
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 {
  grid-column: part-content-start/part-content-end;
}
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: supbart-content-start/subpart-content-end;
}
as-question as-subpart as-marks {
  color: blue;
}

每当我将

<as-marks>{number}</as-marks>

元素放置在

<div class='content'>

元素（具有

display: contents;

）之前，

<div class="content">

的第一个子元素就会被推到下一行（见下图）。

有没有办法确保

<div class='content'>

的第一个子元素放置在标记旁边的第一行？

我可以回去使用网格内的网格，但这看起来更干净。

subgrid

来得不够快。

Codepen 用于演示

如果您好奇为什么 HTML 以这种方式构建，那是因为我尝试将 Prosemirror 与自定义 NodeView 一起使用，这就是 Prosemirror 构建生成的 HTML 的方式。

Answer 1

<div class="content">

项目被推到下一行，因为没有任何东西改变它在网格中的自然位置。

换句话说，它自然地流到下一行，因为在 HTML 中，它位于伪元素之后和

<as-marks>

元素之后。

因此，除非您告诉它在某一行上渲染（例如，

grid-row: 2

），否则由网格自动放置算法控制。

幸运的是，网格作者预见到了这种情况，并实现了一个功能来解决这个问题。

将

grid-auto-flow: dense

添加到网格容器中，并修改算法，告诉它填充网格中较早的空白空间。

这是经过一处修改的代码（以及编译后的 CSS）：

.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];
  grid-auto-flow: dense; /* NEW */
}
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;
}

<div class='wrapper'>
  <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>
</div>