CSS网格，我如何将儿童视为网格单元？

Question

我有一个菜单结构

<ul class="menu">
  <li>
    menu item
    <ul class="menu">
      <li>menu item</li>
    </ul>
  </li>
</ul>

如果我设置外部菜单项显示：默认情况下，网格将是顶部的“ li”。我怎样才能使构成所有“ li”项网格单元的结构扁平化？

Answer 1

您可以使用display: contents（请参阅article on bitsofco.de）将中间元素声明为“甚至不存在”，这会在视觉上展平子列表，因为如果子li和孙子ul不在网格项目，那么文本节点和孙子li现在是它导致huge problems related to semantics and accessibility的网格项目，因为它目前已在浏览器中实现。
例如。首先，您不应该在视觉上展平HTML代码中分层的内容。

CSS解决方案： codepen

.menu_outer {
  display: grid;
  max-width: 20rem;
  border: 1px solid darkblue;
  padding-left: 0;
}

.menu_outer > li,
.menu_outer .menu {
  display: contents;
}

.menu > li {
  background-color: lightblue;
}

/* styling */
li {
  list-style-type: none;
}

<ul class="menu_outer">
  <li>
    menu item
    <ul class="menu">
      <li>menu item</li>
    </ul>
  </li>
</ul>

对display: contents的支持是部分的：Firefox（在传入版本中可访问），Chrome和Safari（内置引擎），但不支持Edge和lol @ IE

Answer 2

怎么样？

.menu li { display: grid; }