Contribution Proposal: Grid Component
See original GitHub issueHello 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 😊
Issue Analytics
- State:
- Created 4 years ago
- Comments:9 (6 by maintainers)
Top Results From Across the Web
ADB CTF Proposal - Renewable Energy Mini-grids and ...
Under the CTF Dedicated Private Sector Program, this sub-program seeks to catalyze growth in access to electricity by addressing primarily ...
Read more >Evaluation of a proposal for reliable low-cost grid power with ...
Evaluation of a proposal for reliable low-cost grid power with 100% wind, water, and solar.
Read more >Proposal Creation - UNC Research
When a sponsor requires the recipient to contribute a certain percentage or amount of funds to the project to receive funding. The majority...
Read more >Developing And Writing Grant Proposals
PART ONE: DEVELOPING A GRANT PROPOSAL. Preparation. A successful grant proposal is one that is well-prepared, thoughtfully planned, and concisely packaged. The ...
Read more >react-grid-component - npm Package Health Analysis | Snyk
A simple react component for rendering any data-set that has x/y coodrinates. For more information about how to use this package see README....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
How about apps? It may make sense to support grids now that customers can extend the entire screens in the web app.
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.
That already seems like a great benefit.