Сетка CSS, как мне относиться к детям как к ячейкам сетки?

Question

У меня есть структура меню

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

Если я установлю внешний пункт меню display: grid, по умолчанию ячейки будут просто верхним 'li'. Как я могу сгладить структуру, создав все ячейки сетки элементов 'li'?

Answer 1

Вы можете объявить промежуточные элементы как "даже не там" с помощью display: contents (см. Статью на bitsofco.de ), которая визуально сглаживает подсписки, потому что если потомок li и внук ul не являются элементы сетки больше, тогда текстовый узел и grand-grand-child li теперь являются элементами сетки, но это вызывает огромные проблемы, связанные с семантикой и доступностью , как это реализовано в браузерах на данный момент.
Например. Вы не должны, во-первых, визуально выравнивать что-то иерархическое в своем 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>

Поддержка дисплея : содержимое является частичным: Firefox (доступно во входящих версиях), Chrome и Safari (с ошибками под капотом), но не Edge and lol @ IE

Answer 2

Как насчет этого?

.menu li { display: grid; }