Arrange some items in last row using grid instead of flex

Question

Previously I made this question. I try the solution linked in the similar question already made (using grid instead of flex) but I have some problems.

I have to build a grid of plots (bar charts). My dataset could be aggregated by Day or by Month. Obviously if the data is aggregated by months, the number of bars is much smaller than the number of bars in case the data is aggregated by day. The width of the plot is proportional to the number of bars.

To show my problem I created these simple images: each rectangle represents a bar chart (is like a placeholder). The larger rectangles represent the bar charts in the case in which the data are aggregated by Day, the narrower bar charts instead represent the bar charts when the data are aggregated by Month.

In this example I suppose that my dataset is composed by 6 chart. I know the width of the graph because it is simply the number of bars for the width of the bar. I would like the data to be positioned automatically.

In each row there cannot be more than two graphs, between a graph and the other there must be some space and the final row (if it is not complete) must have the charts aligned to the left. The last request is the reason why use Flex is not correct, so I switched to Grid.

So, I want that if data are aggregated by Day, charts would like:

If data are aggregated by Month, charts would like:

I try CSS grid using this code:

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

(Each chart can have a large width so there is a horizontal scroll).

The problem now is that the cell of each plot is always the same even if the real dimension if the chart is smaller than the container.

Data aggregated by Day:

Data aggregated by Month:

---

If I use SVG_WIDTH in place of 45% in the minmax statement, I get:

in case data are aggregated by day, and this one in case data are aggregated my month:

---

I didn't use px, thanks! Now it works in the case of aggregation by month but not the case of aggregation by day.

by day (doesn't work):

by month (works):

The problem is that every graph should have a horizontal scroll in fact if the SVG_WIDTH is greater than the size of the father div, then I need to add a scroll.

Here is the code I used:

<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

Use SVG_WIDTH in place of 45% in the minmax statement.

As for the overflow problem that show up for big values, there is a workaround described here, although it is a bit hacky. Adapted to your case, minimum two columns:

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

Where 10 is your grid-gap. And the .container takes full width of the page with body margin reset to 0. Otherwise also add the default margin of the body tag (8px left and right) and the sidebar width if you have one. You can also use CSS calc() if your sidebar or layout is adaptive, but the support for calc() in media queries is limited to very recent browsers currently.