如何无需指定grid-row-start让CSS Grid柱状图每个<li>单独占一行

问题分析 #

你用CSS Grid实现柱状图时，遇到了Grid默认会将能放入剩余空间的列表项（<li>）放在同一行的问题，而你需要每个<li>单独占据一行，且不想为每个元素手动设置grid-row-start。之前尝试设置grid-column-start:1未生效，是因为行内的grid-column: span N简写会覆盖该属性（它默认将grid-column-start设为auto）。

解决方案1：修改行内grid-column写法 #

将每个<li>的行内样式从grid-column: span N改为grid-column: 1 / span N，明确指定从第1列开始跨N列，这样每个列表项会自动从新行的起始位置开始，自然单独占一行：

修改后的HTML示例：

<section>
  <h2>Players per sports team</h2> 
  <ul class="chart">
    <li style="grid-column: 1 / span 11">
      Baseball:
      <span>11</span>
    </li>

    <li style="grid-column: 1 / span 4">
      Football:
      <span>4</span>
    </li>

    <li style="grid-column: 1 / span 3">
      Basketball:
      <span>3</span>
    </li>
    <li style="grid-column: 1 / span 3">
      Basketball:
      <span>3</span>
    </li>
  </ul> 
</section>

CSS无需额外修改，保持你原来的代码即可。

解决方案2：使用CSS变量（更简洁的动态方案） #

如果数据是动态生成的，推荐用CSS变量来管理跨度，避免重复写1 / span：

更新CSS：

section {
  width: 100%;
  max-width: 30rem;
  padding: 1.5rem 1.5rem 2rem;
  border: 2px solid #a7a8aa;
  border-radius: 0.5rem;
  margin: auto;
  box-sizing: border-box;
}

.chart {
  display: grid;
  grid-template-columns: auto;
  grid-auto-columns: 1fr;
  gap: 0.1em 0;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
  border-left: 3px solid grey; 
}

li {
  background: gold;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.5rem;
  border-radius: 0 0.5em 0.5em 0;
  /* 新增：用CSS变量控制列跨度 */
  grid-column: 1 / span var(--span);
}

然后HTML中只需设置变量值：

<section>
  <h2>Players per sports team</h2> 
  <ul class="chart">
    <li style="--span:11">
      Baseball:
      <span>11</span>
    </li>

    <li style="--span:4">
      Football:
      <span>4</span>
    </li>

    <li style="--span:3">
      Basketball:
      <span>3</span>
    </li>
    <li style="--span:3">
      Basketball:
      <span>3</span>
    </li>
  </ul> 
</section>

原理说明 #

通过指定grid-column: 1 / span N，强制每个列表项从Grid容器的第1列开始布局，Grid会自动为每个这样的元素分配单独的行，因为前一行的起始位置已被占用，无需手动指定grid-row-start。

内容的提问来源于stack exchange，提问作者GabboCH