Add Grid component

[gesquinca]

Is your feature request related to a problem? Please describe. rimble doesn't offer a grid component that can hook up to the values in the theme.

Describe the solution you'd like A Grid component with common styled-system props and access to the theme.

<Grid> Default: display: grid

Props: gridGap gridTemplateColumns gridTemplateRows gridTemplateAreas ...Box

<GridArea name={"header"}> Default: grid-name: ${props => props.name}

Props: ...Box

Describe alternatives you've considered using the native grid element

Additional context https://styled-system.com/table#grid-layout

Acceptance criteria:

• Should have new Grid component
• Grid should have grid props
• Should have new GridArea component
• GridArea should have name props
• Grid and GridArea should extend Box

E: 1 D

[sublimatedpotato]

I'm happy to tackle this or #303 or really any of the new issues that have been posted here in the past week if you would like an extra hand to turn some of them around faster.

[zkalman]

@sublimatedpotato Thanks as always for your help! I just labeled a bunch of issues 'Help Wanted'. Any of these would be great for you to work on if you can. They are:

302

304

305

311

313

319

@gesquinca is offline this week, but @MikeLockz can help with any questions. Thanks again!

[sublimatedpotato]

Thanks @zkalman . Always happy to help on this project. You guys are tackling some of the much needed UX aspect of Ethereum and I'm glad I can contribute... that's my obligatory "I'm just happy to be here!"

I'll take a closer look at all of those issues you marked and see which I can knock out.

[zkalman]

 🙏

[sublimatedpotato]

@MikeLockz just for purely selfish reasons of wanting to build something from ground up I'm going to start on this issue. Quick question:

Looking at accepted Grid css props it looks like there are some flex-box props that could be used, as well (e.g. justify-items, align-items, justify-self, align-self, etc.) Should I expose these possibilities, as well, or should I simply focus on those styled-systems props outlined here: https://styled-system.com/table#grid-layout