如何正确运用CSS Grid与Subgrid布局实现列表并避免子元素破坏布局

一、核心实现逻辑 #

1. 基础网格框架搭建
   外层<ol>设为display: grid，定义两列轨道：min-content自适应计数器的宽度，1fr占满剩余空间；同时通过grid-column: subgrid让嵌套的子列表也能继承这个列结构，保证多级列表的对齐一致性。

2. Subgrid实现列对齐
   每个<li>设置grid-column: 1 / -1占满父级网格的所有列，再用grid-template-columns: subgrid，让<li>的伪元素（计数器）和内容自动匹配父级的两列轨道，实现所有列表项的计数器整齐对齐。

3. 自定义计数器替代默认符号
   用counter-reset初始化计数器，counter-increment实现编号递增，通过伪元素::before输出自定义格式的编号；嵌套列表重置新的计数器，就能实现多级不同样式的编号。

二、子元素不破坏布局的关键 #

因为<li>本身是网格容器且启用了subgrid，它的直接子元素（比如<strong>、<em>这类行内元素）会自动流入第二列的网格轨道，不会触发新的布局流，自然不会打乱整体的网格结构。

完整代码示例 #

CSS代码

ol {
    counter-reset: Nr;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-column: subgrid;

    li {
        counter-increment: Nr;
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: subgrid;
        margin-top: var(--listsep);

        &::before {
            content: counter(Nr) ".";
            text-align: end;
            margin-right: 0.85rem;
        }

        ol {
            counter-reset: lit;

            li {
                counter-increment: lit;

                &::before {
                    content: counter(lit, lower-latin)')';
                }
            }
        }
    }
}

HTML代码

<ol>
  <li>This <strong>text</strong> is an example.</li>
  <li>This is ok.</li>
    <li>Nesting should still be possible
        <ol>
            <li>This is nested</li>
        </ol>
    </li>
</ol>

内容的提问来源于stack exchange，提问作者Adler