nem035 / React Gridit
React grid using CSS Grid and styled-components
Stars: ✭ 96
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Gridit
Bedrock
Foundational Layout Primitives for your React App
Stars: ✭ 173 (+80.21%)
Mutual labels: styled-components, css-grid
React Css Grid
React layout component based on CSS Grid Layout and built with styled-components
Stars: ✭ 239 (+148.96%)
Mutual labels: styled-components, css-grid
Atomic Layout
Physical representation of layout composition to create declarative responsive layouts in React.
Stars: ✭ 920 (+858.33%)
Mutual labels: styled-components, css-grid
Theme Builder
The theming system helps you in building a theme of your choice and apply it to test live. Why wait? Just give it a try.
Stars: ✭ 82 (-14.58%)
Mutual labels: styled-components
Netflix
Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Building Netflix Using React
Stars: ✭ 1,254 (+1206.25%)
Mutual labels: styled-components
Styled Shortcuts
Provides convenient props shortcut helper for Styled Components 💅
Stars: ✭ 90 (-6.25%)
Mutual labels: styled-components
Molecule
⚛️ – :atom: – ⚛️ Boilerplate for cross platform web/native react apps with electron.
Stars: ✭ 95 (-1.04%)
Mutual labels: styled-components
Square React Dashboard
👨🎤 React Dashboard Template built with TypeScript
Stars: ✭ 81 (-15.62%)
Mutual labels: styled-components
Raisincss
An Utility CSS only library. It supports css grid and many more useful css properties.
Stars: ✭ 93 (-3.12%)
Mutual labels: css-grid
Ui
React Styled Components with bootstrap grid system
Stars: ✭ 89 (-7.29%)
Mutual labels: styled-components
Meteor Apollo Starter Kit
Meteor, Apollo, React, PWA, Styled-Components boilerplate
Stars: ✭ 91 (-5.21%)
Mutual labels: styled-components
React Image Smooth Loading
[not maintained] Images which just flick to appear aren't cool. Images which appear smoothly with a fade like Instagram are cool
Stars: ✭ 84 (-12.5%)
Mutual labels: styled-components
Pulse Boilerplate
React based boilerplate for creating scalable and well documented Design Systems. Live demo https://pulse.heartbeat.ua
Stars: ✭ 92 (-4.17%)
Mutual labels: styled-components
React Rasta
React Rasta is a powerful and flexible grid system for React
Stars: ✭ 88 (-8.33%)
Mutual labels: styled-components
Placeline Nextjs
HyperTrack Placeline web application sample using NextJS, Ant-Design, Styled-Components, and Heroku
Stars: ✭ 88 (-8.33%)
Mutual labels: styled-components
Next Starter
Next.js Starter using GraphQL, MobX (Next.js, TypeScript, Babel, Express.js, Apollo Client, React Apollo, React Apollo Hooks, GraphQL Codegen, MobX, mobx-state-tree, styled-components, next-optimized-images, Serverless Framework, AWS Lambda, Dotenv)
Stars: ✭ 90 (-6.25%)
Mutual labels: styled-components
react-gridit
React grid using CSS Grid and styled-components
Install
npm i react-gridit
or
yarn add react-gridit
Examples
or checkout the examples React app.
You can run the examples locally by doing npm run examples.
Rows
<GridRows minSize="20px">
<Block size="1fr">1</Block>
<Block size="2fr">2</Block>
<Block size="3fr">3</Block>
<Block size="4fr">4</Block>
<Block size="5fr">5</Block>
</GridRows>
Output:
Columns
<GridColumns minSize="50px">
<Block size="1fr">1</Block>
<Block size="2fr">2</Block>
<Block size="3fr">3</Block>
<Block size="4fr">4</Block>
<Block size="5fr">5</Block>
</GridColumns>
Nesting
<GridRows minSize="20px">
<GridColumns>
<Block size="1fr">1</Block>
<Block size="3fr">3</Block>
</GridColumns>
<GridColumns>
<Block size="1fr">1</Block>
</GridColumns>
<GridColumns>
<Block size="1fr">1</Block>
<Block size="4fr">4</Block>
<Block size="2fr">2</Block>
</GridColumns>
</GridRows>
Areas
<GridArea
area={`
"header header header header"
"sidebar . main1 main2"
"sidebar footer footer footer"
`}
>
<Block header>Header</Block>
<Block sidebar>Sidebar</Block>
<Block main1>Main1</Block>
<Block main2>Main2</Block>
<Block footer>Footer</Block>
</GridArea>
Output:
Responsive areas
<GridArea
area={`
"a b"
"c d"
`}
query="(max-width: 599px)"
fallbackArea={`"a b c d"`}
>
<Block a>A</Block>
<Block b>B</Block>
<Block c>C</Block>
<Block d>D</Block>
</GridArea>
Output (match):
Output (no match):
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].