CSS Grid BarChart - 在不指定 grid-row-start 的情况下将新的 <li> 项目强制放到新行中

Question

我正在尝试仅使用 HTML/CSS 创建可配置的条形图... 我从 Josh Collingsworth 的教程开始： https://joshcollinsworth.com/blog/css-grid-bar-charts

它使用 CSS GRID 根据提供的列跨度自动调整大小。 我遇到的问题（他也在他的示例中进行了解释，但没有给出明确的解决方案）是，如果其中一个项目很大，则 GRID 的自然行为是将其他项目放在下一行上，因为有空间足够。

当我尝试创建一个简单的条形图时，我想将每个项目强制放在新行上。

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;
}

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

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

    <li style="grid-column: span 3">
      Basketball:
      <span>3</span>
    </li>
    <li style="grid-column: span 3; grid-row-start:4;">
      Basketball:
      <span>3</span>
    </li>
  </ul> 
</section>

由于我的数据是动态的，我正在寻找一种通过 CSS 强制每个 ListItem 在单独的行上开始的简单方法。

我发现，如果我为每个项目显式指定行，它就可以工作，但感觉好像我缺少 CSS 中的一些简单的东西，而这些东西可以完成同样的事情？

<li style="grid-column: span 4; grid-row-start: 1">

我还尝试在 ListItem CSS 中使用

grid-column-start:1

强制每个 ListItem 从第 1 列开始，但这不起作用。

Answer 1

事实上，这个例子确实给出了解决方案。

幸运的是，有一个简单的解决方案。

首先，在 CSS 中的每个网格项上设置

grid-column-start: 1

；

然后，只需在每个栏的内联样式上使用

grid-column-end

而不是

grid-column

即可。 （

grid-column-end: span x;

或

grid-column-end: x + 1;

都可以，其中 x 是数据点的值。）

这有效。

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;
  gap: 0.1em 0;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
  border-left: 3px solid grey;
}

li {
  background: gold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.5rem;
  border-radius: 0 0.5em 0.5em 0;
  grid-column-start: 1;
}

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

    <li style="grid-column-end: 3">
      Football:
      <span>3</span>
    </li>

    <li style="grid-column-end: 4">
      Volleyball:
      <span>4</span>
    </li>
    <li style="grid-column-end: 3;">
      Basketball:
      <span>3</span>
    </li>
  </ul>
</section>