是否可以使用 Grid css 进行良好的子导航？

Question

使用 CSS 网格是否可以使顺序为：
1 6
2 7
3 8
4 9
5 10

header {
  background: #00333333; 
 width: 700px; 
}

ul {
  width: 100%; 
  display: grid;
  grid-gap: 10px; 
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
}

<header>
    <p>Homepage</p>
      <ul calss="subpoints">
      <li>Homepage1</li>
      <li>Homepage2</li> 
      <li>Homepage3</li>
      <li>Homepage4</li>
      <li>Homepage5</li>
      <li>Homepage6</li>
      <li>Homepage7</li>
      <li>Homepage8</li>
      <li>Homepage9</li>
      <li>Homepage10</li>
      </ul>
</header>

我不使用 flex 项目并且不在 div 中包装每 5 个项目，因为我使用动态 html 数据，它可以是 20 li 标签或更多。

Answer 1

你可以尝试在 JS 和 css 变量的帮助下完成它：

let htmlStyles = window.getComputedStyle(document.querySelector("html"));
let rowNum = parseInt(htmlStyles.getPropertyValue("--rowNum"));
const listItems = document.querySelectorAll(' li');
let nrRows = Math.floor(listItems.length / 2)
document.documentElement.style.setProperty("--rowNum", nrRows);

:root {
  --rowNum: 4;
  --colNum: 2;
  --gridHeight: 20px;
}

header {
  background: #00333333; 
  width: 700px; 
}

ul {
  width: 100%; 
  display: grid;
  grid-gap: 10px; 
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--rowNum), var(--gridHeight));
  grid-template-columns: repeat(var(--colNum), auto);
}

<header>
  <p>Homepage</p>
  <ul class="subpoints">
    <li>Homepage1</li>
    <li>Homepage2</li> 
    <li>Homepage3</li>
    <li>Homepage4</li>
    <li>Homepage5</li>
    <li>Homepage6</li>
    <li>Homepage7</li>
    <li>Homepage8</li>
    <li>Homepage9</li>
    <li>Homepage10</li>
  </ul>
</header>

是否可以使用 Grid css 进行良好的子导航？

Is it possible to make good subnavigation with Grid csss?

html

css

css-grid