react-flexbox-grid - A set of React components implementing flexboxgrid with the power of CSS Modules

  •        16

react-flexbox-grid is a set of React components that implement flexboxgrid.css. It even has an optional support for CSS Modules with some extra configuration.react-flexbox-grid imports the styles from flexboxgrid, that's why we're configuring the loader for it.

https://github.com/roylee0704/react-flexbox-grid

Tags
Implementation
License
Platform

   




Related Projects

react-styled-flexboxgrid - Grid system based on styled-components and flexbox for React

  •    Javascript

Set of React components that implement flexboxgrid.css but with styled-components. Furthermore, it allows to customize grid configuration like gutter width... Highly inspired by the excellent react-flexbox-grid which the API is nearly the same than this module.

reflexbox - React flexbox layout and grid system

  •    Javascript

Primitive for controlling width, margin, padding and more. Both <Flex /> and <Box /> share the same props.

grid-styled - Responsive React grid system built with styled-system

  •    Javascript

The Box component handles width, margin and padding. All grid-styled components use styled-system for style props, which pick up values from a theme and allow for responsive styles to be passed as array values.

react-foundation-apps - Foundation Apps components built with React

  •    Javascript

Foundation Apps is a new framework for building web apps. It has awesome new features like flexbox based grid, motion-ui, and several core components for building web apps. But, javascript components of foundation-apps are built with angular. Try React Foundation Apps, if you want to use react.


flexbox-react - Unopinionated, standard compliant flexbox component

  •    Javascript

Unopinionated, standard compliant flexbox components. You should not learn any proprietary syntax, classnames or API's for this. If you know how to use flexbox, you know how to use flexbox-react components.

react-native-easy-grid - Easy React Native Layout & Grid for the Dumb

  •    Javascript

This is NOT-JUST-ANOTHER-GRID-LAYOUT library! We are trying to simplify flexbox with easier approach.

react-absolute-grid - An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React

  •    Javascript

An absolute layout grid with animations, filtering, zooming, and drag and drop support. Use your own component as the grid item. See the Demo. The idea behind AbsoluteGrid is high performance. This is achieved by using Translate3d to position each item in the layout. Items are never removed from the DOM, instead they are hidden. For best performance you should avoid re-arranging or removing items which you pass into AbsoluteGrid, instead you can use the filtered and sort properties to hide or sort an item. Those properties are customizable using the keyProp and filterProp properties. In addition, all data passed must be immutable so that we don't waste any renders.

rebass - :atom_symbol: React UI component library & design system, built with styled-components and styled-system

  •    Javascript

React UI component library & design system, built with styled-system, with support for styled-components & emotion. Rebass is a library of highly-composable, primitive UI components for React, built with styled-components to keep styles isolated and reduce the need to write custom CSS in your application. Based upon a configurable design system, Rebass‘s props API makes building consistent, responsive web apps simpler and faster.

css-gridish - Automatically build your grid design’s CSS Grid code, CSS Flexbox fallback code, Sketch artboards, and Chrome extension

  •    CSS

This tool is not a grid system with a grid already designed for you. Instead, CSS Gridish builds all of the resources for the grid your team designed. We hope it helps teams adapt CSS Grid sooner and enables more complex layouts. To show how versatile the tool is, we have examples of grids from Bootstrap, Carbon Design System, and Material Design.

grd - A CSS grid framework using Flexbox. Only 321 bytes (Gzipped).

  •    HTML

A CSS grid framework using Flexbox. Flexible Box Layout Module and calc() as CSS unit value used in Grd are available on modern browsers (Chrome, Firefox, Safari, Opera, Edge and IE11).

styled-css-grid - 🍱 A tiny CSS grid layout for React

  •    Javascript

A tiny (~2kb) CSS grid layout for React, built with styled-components 💅. See the website.

react-native-super-grid - Responsive Grid View for React Native

  •    Javascript

Responsive Grid View for React Native. This component renders a Grid View that adapts itself to various screen resolutions.

react-foundation - Foundation as React components.

  •    Javascript

Foundation as React components. Foundation is both feature-rich and easy to customize. React on the other hand is awesome because of its simplicity. It's even more awesome when combined with Redux and Immutable.

react-native-grid-view - React Native Grid/Collection View component

  •    Javascript

This component allows to display a grid/collection of items with more than one item per row. The items per row is configurable and it uses a 'ListView' in order to have a proper recycle mechanism.