feat: Base implementation for Grid

[bmdalex]

Feature Request

OP: @levithomason linked from react-old/issues/97

Grid

This API proposal is for creating a minimal base implementation of a Grid component. I propose this is done using CSS Grid syntax, respecting IE 11 shortcomings (no gap, no template areas).

Helpful resource: https://learncssgrid.com

API Proposal

columns (quantity)

A Grid can define an arbitrary number of columns of equal width.

<Grid columns='3'>  //=> { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  <Box>1</Box>
  <Box>2</Box>
  <Box>3</Box>
</Grid>

A string or a number should be accepted.

columns (explicit)

A Grid can explicitly define columns and their sizes.

For now, this is simply using the grid-template-columns value syntax. Proposing we consider more useful abstractions later.

<Grid columns='90px 50px 120px'> //=> { display: grid; grid-template-columns: 90px 50px 120px; }
  <Box>1</Box>
  <Box>2</Box>
  <Box>3</Box>
  <Box>4</Box>
  <Box>5</Box>
  <Box>6</Box>
</Grid>

rows (quantity)

Note, unlike the columns I'm not proposing a way of defining an arbitrary number of rows. Rows are created automatically when columns wrap. Therefore, it makes no sense to say a Grid will have X rows ahead of time.

It may prove useful to be able to say "assign this value to all rows", however, I'm leaving this out of the base implementation proposal.

rows (explicit)

A Grid can explicitly define the sizes of its rows.

For now, this is simply using the grid-template-rows value syntax. Proposing we consider more useful abstractions later.

<Grid rows='50px 100px'> //=> { display: grid; grid-template-rows: 50px 100px; }
  <Box>1</Box>
  <Box>2</Box>
  <Box>3</Box>
  <Box>4</Box>
  <Box>5</Box>
  <Box>6</Box>
</Grid>

[bmdalex]

@levithomason

I started working on this and got a few questions for the first version:

1. Is this the complete API? It looks a bit limiting to have only these props (I extracted them in an interface):

interface IGridProps {
  as?: string
  children?: ReactNode
  className?: string
  columns?: string | number
  content?: ReactNode
  rows?: string
}

2. Shouldn't we add a sub-component for children (GridItem)? On CSS Tricks for Grid there are plenty of examples on how to style individual items; maybe add orientation (justify-self, align-self, place-self, etc)? or should we keep that for v2?

3. Related to 2; how do we align items?

• Do we add any props to the Grid component?
• Do we add GridItem sub-component to make it more visible or other options?
• Do we create some default alignment (everything centered let's say) and iterate from there?

4. Children and content

• What should be the API for content initially and how do we render it in the DOM?
• Should we manipulate children in any way to add correct grid item styling? (e.g.: going through children and adding CSS classes)

[levithomason]

rows (quantity)

Looking back, this is short sighted. If you have a grid with a fixed height, you very well may want to equally divide up that vertical space by passing a number of rows. Let's give the same API to rows as columns has.

Grid Item

Yes, let's save for a future PR.

Should we manipulate children in any way to add correct grid item styling?

Best practice is to never parse/loop over children. This is because they can be wrapped in HOCs making it difficult to work with as you don't know what component you might encounter or what features they support.

We'll use the CSS grid syntax from the parent to position children. Once we get to fine grained positioning for one off children, we'll likely have a GridItem type of component. Similar to how SUIR has a Grid and Grid.Column/Grid.Row.

[bmdalex]

Opened a PR for it, WIP #15
@levithomason

[levithomason]

We need to ensure the grid renders correctly with the requirements here: #29