CSS How to move a category to be below another category in a grid layout?

Question

I have a grid layout where I want "Category 9" to be positioned directly below "Category 5". Then, Category 13 to be under Category 9. Same situation for 8, 12 and 16. However, due to the presence of subcategories from "Category 7", "Category 5" has some height and is pushing "Category 9" down.

Category 10 shoul be under Subcategory 2, etc.

I tried with grid-row: 1 / -1, with grid-auto-flow: dense, but I'm not getting the result that I want.

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
}

<ul class="grid">
  <li> Category 1 </li>
  <li> Category 2 </li>
  <li> Category 3 </li>
  <li> Category 4 </li>
  <li> Category 5 </li>
  <li> Category 6
    <ul>
      <li> Subcategory 1 </li>
      <li> Subcategory 2 </li>
    </ul>
  </li>
  <li> Category 7
    <ul>
      <li> Subcategory 1 </li>
      <li> Subcategory 2 </li>
      <li> Subcategory 3 </li>
      <li> Subcategory 4 </li>
    </ul>
  </li>
  <li> Category 8 </li>
  <li> Category 9 </li>
  <li> Category 10 </li>
  <li> Category 11 </li>
  <li> Category 12 </li>
  <li> Category 13 </li>
  <li> Category 14 </li>
  <li> Category 15 </li>
  <li> Category 16 </li>
</ul>