Contribution Proposal: Grid Component

Hello Lovely F36 Community 👋

I’m proposing a new Grid component to ease the overhead for developer to write their own layout css.

Overview

• Built on CSS Grid
• Fluid Grid (columns width is relative to the container width)
• Grid Playground - Alpha CodeSandbox
• Fun way to learn css grid: CSSGridGarden

The Grid consists of two components Grid and GridItem :

Grid Component

Represents the Grid container

Prop	Description
columns	number, or grid-template-columns values
rows	number, or grid-template-rows values
rowGap	string, one of spacing values, default is 0
columnsGap	string, one of spacing values, default is spacing-l = 1.5rem
flow	string, accepts grid-auto-flow css values
justifyContent	string, one of justify-content css values
alignContent	string, one of align-content css values
inline	boolean, sets grid container to display: inline-grid

GridItem Component

Represents the Grid Items

Prop	Description
columnStart	number, accepts grid-column-start css values
columnEnd	number, accepts grid-column-end css values
rowStart	number, accepts grid-row-start css values
rowEnd	number, accepts grid-row-end css values
area	string, accepts grid-area css values
order	number, accepts order css values

The component usage would be something like this…

<Grid columns={12} rows={3} columnGap={'xs'}>
  <GridItem rowStart={1} rowEnd={2}>
    <p>I'll be in column 1, row 1</p>
  </GridItem>
  <GridItem rowStart={3} columnStart={2}>
    <p>I'll be in column 6, row 2</p>
  </GridItem>
</Grid>

Question

• Shall we introduce optional breakpoints, and make the grid responsive ready?

Let me know what you think 😊

[joaoramos]

How about apps? It may make sense to support grids now that customers can extend the entire screens in the web app.

[domarku]

Thanks for the clarification, @mshaaban0.

I wasn’t aware of some of these uses and it would be great if we would suggest some best practices in the component documentation.

For the above example, devs would have to write almost the same custom css, use specific tokens, and maybe they use the grid, or flexbox. This component here, aims to reduce that, and at the same time ensure consistency (correct spacing usage).

That already seems like a great benefit.