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>

（每个图表的宽度都可以大，因此可以水平滚动）。

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

按天汇总的数据：

按月汇总的数据：

如果我在SVG_WIDTH语句中使用minmax代替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

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

至于为大数值显示的溢出问题，here中描述了一种变通方法，尽管它有点笨拙。适应您的情况，至少两列：

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

10是您的grid-gap。 .container会占据页面的整个宽度，并且将body margin重置为0。否则，还添加body标签的默认边界（左右8px）和侧边栏宽度（如果有的话）。如果您的侧边栏或布局具有自适应性，但也可以使用CSS calc（），但是媒体查询is limited当前对最近的浏览器的支持calc（）。

使用网格而不是flex在最后一行中安排一些项目

1 个答案: