rrg

react-responsive-grid

Power tools for building responsive layouts with React

Showing:

Popularity

Downloads/wk

73

GitHub Stars

91

Maintenance

Last Commit

5yrs ago

Contributors

3

Package

Dependencies

3

Size (min+gzip)

3.3KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Build
Status

react-responsive-grid

Power tools for building responsive layouts with React.

WIP, porting best ideas from Susy to a React-friendly and CSS-independent format.

Susy porting progress

Container

  • Basic fluid container
  • static
  • non-centered layouts
  • container positions (left, center (default), right, length (left and right))

Breakpoint

  • Basic component width breakpoints (note this is different than a media query breakpoint)
  • Media query breakpoints

Columns

  • set number of columns
  • list — create asymmetrical grids. List the size of each column relative to other columns where 1 is a single column-unit. (1,2) would create a 2-column grid where the second column being twice the width of the first.

Gutter options

  • margin-based
  • padding-based
  • explicit gutter width

Gutter positions

  • before
  • after
  • inside
  • inside-static
  • split

Span

  • Set # of columns
  • Set arbitrary width
  • Remove last gutter by "last" prop
  • Remove first gutter by "first" prop
  • Support nested spans
  • Set location of span using "at" prop
  • Span external gutters (in addition to internal gutters)
  • "break" prop — start new row by clearing previous spans
  • No gutters option
  • "full" prop — shortcut for a span to fill its entire context
  • "pre" prop — add margin before a span
  • "post" prop — add margin after a span
  • "squish" prop — shortcut for adding pre and post margins to the same span
  • "pull" prop — add negative margin before a span pulling it against the direction of flow
  • "prefix" prop — add padding before a span
  • "suffix" prop — add padding after a span
  • "pad" prop — add padding before and after a span
  • "bleed" prop — Apply negative margins and equal positive padding so that span borders and backgrounds "bleed" outside of their containers
  • "bleed-x" prop — a shortcut for applying only left and right (horixontal) bleed
  • "bleed-y" prop — a shortcut for applying only top and bottom (vertical) bleed

Debuggin

  • Show grid

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial