jxnblk / React Css Grid
Licence: mit
React layout component based on CSS Grid Layout and built with styled-components
Stars: ✭ 239
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Css Grid
Bedrock
Foundational Layout Primitives for your React App
Stars: ✭ 173 (-27.62%)
Mutual labels: layout, grid-layout, styled-components, css-grid
grid-layout
grid-layout is a layout engine which implements grid, can use in canvas/node-canvas
Stars: ✭ 43 (-82.01%)
Mutual labels: layout, css-grid, grid-layout
Interior
Design system for the modern web.
Stars: ✭ 77 (-67.78%)
Mutual labels: layout, grid-layout, css-grid
Atomic Layout
Physical representation of layout composition to create declarative responsive layouts in React.
Stars: ✭ 920 (+284.94%)
Mutual labels: layout, styled-components, css-grid
Awesome Grid Layout
👓 A curated list of CSS Grid Layout Module or only Css Grid.
Stars: ✭ 91 (-61.92%)
Mutual labels: grid-layout, css-grid
React Rasta
React Rasta is a powerful and flexible grid system for React
Stars: ✭ 88 (-63.18%)
Mutual labels: grid-layout, styled-components
React Photo Layout Editor
Photo layout editor for react
Stars: ✭ 96 (-59.83%)
Mutual labels: layout, grid-layout
Framelayoutkit
FrameLayoutKit is a super fast and easy to use autolayout kit
Stars: ✭ 53 (-77.82%)
Mutual labels: layout, grid-layout
Flutter layout grid
A grid-based layout system for Flutter, inspired by CSS Grid Layout
Stars: ✭ 109 (-54.39%)
Mutual labels: layout, grid-layout
Popo
PoPo is the grid layout tool, the best choice for runtime layout.
Stars: ✭ 130 (-45.61%)
Mutual labels: layout, grid-layout
Animate Css Styled Components
simple port of animate css for styled-components
Stars: ✭ 173 (-27.62%)
Mutual labels: react-component, styled-components
Magic Grid
A simple, lightweight Javascript library for dynamic grid layouts.
Stars: ✭ 2,827 (+1082.85%)
Mutual labels: layout, grid-layout
React Gridit
React grid using CSS Grid and styled-components
Stars: ✭ 96 (-59.83%)
Mutual labels: styled-components, css-grid
React Xmasonry
Simple, minimalistic and featured native masonry layout for React JS.
Stars: ✭ 62 (-74.06%)
Mutual labels: layout, react-component
Bootstrap Grid Css
The grid and responsive utilities classes extracted from the Bootstrap 4 framework, compiled into CSS.
Stars: ✭ 119 (-50.21%)
Mutual labels: grid-layout, css-grid
Styled Bootstrap Components
The bootstrap components made with styled-components 💅
Stars: ✭ 196 (-17.99%)
Mutual labels: layout, styled-components
Burnoutjs
🎮 2D game engine for manage collisions. Made with javascript and CSS Grid Layout.
Stars: ✭ 45 (-81.17%)
Mutual labels: grid-layout, css-grid
React Awesome Styled Grid
A responsive 8-point grid system layout for React using styled-components
Stars: ✭ 157 (-34.31%)
Mutual labels: grid-layout, styled-components
React CSS Grid
React layout component based on CSS Grid Layout and built with styled-components
npm i react-css-grid
// Example usage
import React from 'react'
import Grid from 'react-css-grid'
class App extends React.Component {
render () {
return (
<Grid
width={320}
gap={24}>
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
</Grid>
)
}
}
Features
- Responsive grid layout with zero media queries
- Simple API for handling tiled layouts
- Customizable column width and gutters
Props
width
(number or string)
Sets the width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length.
<Grid width={512} />
gap
(number or string)
Sets the gutter (grid-gap
) between columns.
Pass a number for pixel values or a string for any other valid CSS length.
<Grid gap={16} />
align
(string)
Sets align-items
to control child element alignment.
Browser Support
See http://caniuse.com/#feat=css-grid
Related
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].