使用grid而不是flex在最后一行排列一些项目

Question

之前我做了this question。 我尝试了已经提出的类似问题中链接的解决方案（使用grid 而不是flex），但我遇到了一些问题。

我必须建立一个图表网格（条形图）。我的数据集可以按天或按月聚合。 显然，如果数据按月汇总，则柱的数量远小于按天汇总数据时的柱数。 图的宽度与条的数量成正比。

为了显示我的问题，我创建了这些简单的图像：每个矩形代表一个条形图（就像一个占位符）。 较大的矩形表示按天汇总数据时的条形图，较窄的条形图表示按月汇总数据时的条形图。

在这个例子中，我假设我的数据集由 6 个图表组成。 我知道图表的宽度，因为它只是条形宽度的条形数。 我希望自动定位数据。

每行中的图表不能超过两个，一个图表和另一个图表之间必须有一些空间，并且最后一行（如果不完整）必须使图表向左对齐。最后一个请求是使用Flex不正确的原因，所以我切换到了Grid。

所以，如果数据按天聚合，我希望图表如下：

如果数据按月份汇总，图表如下：

我尝试使用以下代码使用 CSS 网格：

<div
  className="relative ba b--black"
  style={{
    display: 'grid',
    gridTemplateColumns: `repeat(auto-fit, minmax(45%, 1fr))`,
    gridAutoRows: SVG_HEIGHT,
    gridGap: '10px 5px', // space h, space v
  }}
>
  {
    data.map((plot, plotIdx) => {
      return (
        <div
          key={plotIdx}
          className="ba b--black overflow-x-auto"
          onScroll={this.handleHorizontalScroll(plotIdx)}
        >
          <svg
            width={SVG_WIDTH}
            height={CHART_HEIGHT + MARGINS.bottom + MARGINS.top}
          >
            // other code...
          </svg>
        </div>
      )
    })
  }
</div>

（每个图表可以有很大的宽度，所以有一个水平滚动）。

现在的问题是，如果图表小于容器，即使实际尺寸，每个绘图的单元格始终相同。

按天汇总的数据：

按月份汇总的数据：

---

如果我在minmax 语句中使用SVG_WIDTH 代替45%，我得到：

如果数据是按天汇总的，而这个数据是按月汇总的：

---

我没有使用px，谢谢！现在它适用于按月聚合的情况，但不适用于按天聚合的情况。

按天（不起作用）：

按月（作品）：

问题是每个图都应该有一个水平滚动实际上如果SVG_WIDTH大于父亲div的大小，那么我需要添加一个滚动。

这是我使用的代码：

<div
  className="relative ba b--black"
  style={{
    display: 'grid',
    gridTemplateColumns: `repeat(auto-fit, minmax(${SVG_WIDTH}px, 1fr))`,
    gridAutoRows: PLOT_HEIGHT,
    gridGap: '10px 5px', // space h, space v
  }}
>
  {data.map((plot, plotIdx) => {
    const yScale = this.yScale(plot)
    const yAxisTicks = yScale.ticks(4)

    return (
      <div
        key={plotIdx}
        ref={plotElem => (this.plots[plotIdx] = plotElem)}
        className="ba b--black overflow-x-auto"
        onScroll={this.handleHorizontalScroll(plotIdx)}
      >
      // ...
      </div>
    )}
  )}
</div>

Answer 1

在minmax 语句中使用SVG_WIDTH 代替45%。

至于出现大值的溢出问题，有一个描述为here 的解决方法，虽然它有点hacky。根据您的情况调整，最少两列：

@media (max-width: ${SVG_WIDTH * 2 + 10}px) {
  .container { grid-template-columns: repeat(2, 1fr); }
}

10 是您的grid-gap。并且.container 采用页面的全宽，body 边距重置为 0。否则，还添加 body 标签的默认边距（左右 8px）和侧边栏宽度（如果有的话）。如果您的侧边栏或布局是自适应的，您也可以使用 CSS calc()，但目前在媒体查询 is limited 中对 calc() 的支持适用于最近的浏览器。