https://github.com/alexanderjeurissen/grid

A declarative React primitive Grid component that exposes css-grid specification in JSX
https://github.com/alexanderjeurissen/grid

component css-grid css-grid-layout grid jsx primitive react react-css-grid react-grid-layout react-grid-system styled-components styled-system

Last synced: about 3 hours ago
JSON representation

A declarative React primitive Grid component that exposes css-grid specification in JSX

• Host: GitHub
• URL: https://github.com/alexanderjeurissen/grid
• Owner: alexanderjeurissen
• License: mit
• Created: 2020-06-12T19:26:04.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-03-05T00:02:07.000Z (over 1 year ago)
• Last Synced: 2024-09-23T11:16:54.767Z (about 1 month ago)
• Topics: component, css-grid, css-grid-layout, grid, jsx, primitive, react, react-css-grid, react-grid-layout, react-grid-system, styled-components, styled-system
• Language: TypeScript
• Homepage:
• Size: 394 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![image](public/assets/logo.png)

![Publish](https://github.com/alexanderjeurissen/grid/workflows/Publish/badge.svg)

> The Grid. A digital frontier. I tried to picture clusters of information as they moved through the computer. What did they look like? Ships, motorcycles? Were the circuits like freeways? I kept dreaming of a world I thought I'd never see. And then, one day I got in...

A declarative React primitive Grid component that exposes css-grid specification in JSX

Based on Styled System and Styled Components. Written in typescript to provide strict prop validation on css spec adherence.

## Usage

Import as follows:

`import Grid from 'react-grid-primitive';`

Then use the grid to define the desired css grid layout:

e.g. for a 200px height header, with a left sidebar that is 100px in width and a main content that takes up the remainder

```

 

 

 

```

## Additional resources

- https://www.w3.org/TR/css-grid-1/

- https://css-tricks.com/snippets/css/complete-guide-grid/