[RFC] Grid

[connor-baer]

Components to amend

Grid, Row, Col

Context

Circuit UI currently provides a float-based grid system. This is mostly because SumUp's dashboard is still supporting very old browsers (i.e., webviews on old Android phones) with bad flexbox and no CSS grid support. Users of Circuit UI aren't all happy with this and provided some feedback:

• "It would be nice to add more helpers to the Row and Col components, for aligning elements and to have more flexibility"
• The grid components add several layers of divs that pollute the JSX and DOM.
• Nested grids are not possible since the gutters don't match up

Goals

• Gutters: These are arguably the most important part of a grid system since they determine alignment. They need to be consistent even when nested.
• Placement: Users need to be able to place items anywhere inside the grid system and align them to any side.
• Responsive: Gutters and placement need to be adjustable across viewports.

Proposals

1. No grid / BYO

CSS Grid is now supported by 93.5% of globally used browsers. It covers even the most advanced use cases (except nested subgrids). Plus there are a plethora of third-party React grid libraries to choose from. So do we still need to provide a grid system with Circuit UI?

The only thing we need to provide is consistent values for the gutter in the theme (see also #534).

2. Improve the grid

We could add additional features to the current grid components, e.g. to support nested grids. Some users also suggested to switch to flexbox and while flexbox is arguably more powerful than floats, it's still only meant for one-dimensional layouts (versus CSS Grid's two dimensions).

[larimaza]

1. Props for the use of "plethora", very fancy;
2. I vote for the "No grid" approach, because I imagine any implementation we create will be mainly a pure abstraction of the existing grid API without additional features that are specific to our use cases. If that's not the case and we in fact need to add more features, we'd need to list these first to make sure we have enough reasons :)

[fernandofleury]

I think we should move to the no grid approach. My biggest concern is that gutter/col definition exists (and should be followed, since it it's part of our visual language) within our design system. By removing the grid and letting the consumer decide how to arrange things, it will probably mean we will end up with different spacings across different domains.

[fernandofleury]

And we can't also discard the convenience of grid as utility vs redoing it for scratch over and over. If we don't provide a built in grid, we could maybe nudge into the right direction like suggesting libraries (like https://rebassjs.org/reflexbox/) and configuration for it to match our gutter/col usage.

[connor-baer]

Alright, there seems to be a consensus to drop support for a grid in Circuit UI. What does that mean for the existing Grid components? I'd like to discourage their use, but do we fully deprecate them or keep them around for legacy reasons?

[robinmetral]

I would deprecate and link to documentation for migrating to any other grid system we choose. We could write it in a README in components/Grid for example. WDYT?

[fernandofleury]

I think we need to discuss this in further details before we go for deprecation. The majority of our web context is still using the Grid.

What I propose is:

• Let's discuss new ways of working with a grid that is compliant to our design-system guidelines, and considers different levels of cross-browser support;
• Run a POC replacing the current Grid usage;
• Wrap up the POC & publish new documentation reflecting the usage;
• Deprecate current Grid component

Let's be careful and remember that the design system is meant to power up our developers in their current scenarios. Not provide an experience that most of them can't comply to.

[robinmetral]

Naturally I wasn't suggesting a deprecation without a solid proof of concept + migration guide. Looks like we're on the same page 👌

[felixjung]

Hey, I'm late to the party. :D Generally I feel we don't need a dependency for the Grid. At this point, I think even the Dashboard would be fine with Flexbox (and maybe the Grid?). Could well be that we bump the build targets for iOS and Android early next year.

I still feel we should

• get clear input from design with respect to what types of grids they want to support and
• implement those grids in Circuit UI.

We want to make sure designs and implementations use the grids that are part of the design system and we want consistency.

[felixjung]

Here's an adaptation of the Circuit UI Grid using CSS Grid. The API should be pretty much identical and so should the spacing/gutter be.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Add a comment explaining why the issue is still relevant to prevent it from being closed.

[connor-baer]

The grid components will be marked as legacy in Circuit UI v7. We recommend using the native CSS Grid instead.

We might explore patterns for column and gutter widths in the future.