All Projects → jxnblk → React Css Grid

jxnblk / React Css Grid

Licence: mit
React layout component based on CSS Grid Layout and built with styled-components

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
Xray React
React layout debugger.
Stars: ✭ 128 (-46.44%)
Mutual labels:  layout, react-component
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
Grid Cheatsheet
CSS Grid cheat sheet
Stars: ✭ 83 (-65.27%)
Mutual labels:  grid-layout, css-grid
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

Build Status GitHub

Demo

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

MIT License

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].