CSS网格与表格一样的布局？

我在使

和

在文本行中断时正常工作方面遇到问题

我在stackoverflow上看到了一些答案，您可以在ul/ol上设置

display:table

，在li上设置

table row

，在li:：before元素上设置

table cell

。这就像我想要的，但限制了我，所以我不能在li上设置

边距底部

设置
文本缩进
和负数
边距
也不起作用，因为：：before元素的宽度将不同。例如，如果计数器变为两位数而不是一位数

所以我的问题是，是否有可能使用新的网格布局来解决这个问题？我已经做了一些修补，但我无法在不设置固定宽度的情况下将所有：：before元素保持相同的宽度

有人知道怎么解决这个问题吗

编辑：
内容是从CMS生成的，所以我只能使用它们的标记。这是带有li标签的常规ul/ol

更新

我希望文本像这样对齐，我当前的代码可以很好地处理无序列表

但在处理有序列表时，它会变得更加复杂，因为作为我的项目符号和编号的
：：before
元素可能与不同。乙二醇


单位数可以处理，但当变为双位数时，数字最终会溢出文本。因此，我希望所有
：：before
元素具有相同的宽度，以便文本仍然正确对齐。在这种情况下，宽度应等于元素（数字10）之前的最大值

示例代码

ol {
  counter-reset: list;

  & li {
    position: relative;
    counter-increment: list;
    padding-left: 18px;

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      margin-right: 8px;
      content: counter(list);
    }
  }
}

这是你需要的吗？如果是这样，你需要转到LESS，因为这在这里运行得不太好


ol{
计数器复位：列表；
列表样式：无；
}
李{
位置：相对位置；
计数器增量：列表；
左侧填充：18px；
}
李：以前{
位置：绝对位置；
排名：0；
左：-1.5em；
右边距：8px；
内容：柜台（列表）；
宽度：2米；
文本对齐：右对齐；
}

洛勒姆
Lorem ipsum dolor sit amet，是一位杰出的献身者。多奈克·奎斯调味品马萨
洛勒姆
Lorem ipsum dolor sit amet，是一位杰出的献身者。多奈克·奎斯调味品马萨
洛勒姆
Lorem ipsum dolor sit amet，是一位杰出的献身者。多奈克·奎斯调味品马萨
洛勒姆
Lorem ipsum dolor sit amet，是一位杰出的献身者。多奈克·奎斯调味品马萨
洛勒姆
Lorem ipsum dolor sit amet，是一位杰出的献身者。多奈克·奎斯调味品马萨
洛勒姆
Lorem ipsum dolor sit amet，是一位杰出的献身者。多奈克·奎斯调味品马萨
使用内部div设置边距，这样您的li元素就可以将display:table单元格放在内部div中并设置边距。或者，如果不需要边框，可以使用透明边框而不是margins@JavaEvgen不能这样做，因为我无法控制标记。在我的问题中添加了关于这一点的评论那么透明边框呢？顺便说一句，否决票不是mine@JavaEvgen这也没用：/I在Element发布代码或问题的屏幕截图之前，我可能不得不恢复到使用固定宽度的：：吗？换行符的“问题”到底是什么？