Responsive React grid system built with styled-system, with support for styled components and emotion (previously called grid-styled). The Box component handles width, margin and padding. All @rebass/grid 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. Sets width, where numbers 0-1 are percentage values, larger numbers are pixel values, and strings are raw CSS values with units. Pass an array to set different widths at different breakpoints for responsive styles. Both margin and padding props accept numbers, strings, and arrays as values. Using a number from 0-8 (i.e. an index of theme.space) will reference a step on the spacing scale. Larger numbers are converted to pixel values. Negative Numbers can be used to set negative margins and compensate for grid gutters. Strings are passed directly for other valid CSS values.

Features

  • Use array values to set different margin or padding values per breakpoint for responsive styles
  • Margin and padding props follow a shorthand syntax for specifying direction
  • Pass styles to styled-components or emotion
  • The Flex component extends the Box component and sets display flex
  • Component can be extended with React or using styled-components or emotion
  • Rebass Grid is intended for use with styled-components v4

Project Samples

Project Activity

See All Activity >

License

MIT License

Follow Rebass Grid

Rebass Grid Web Site

Other Useful Business Software
Compliant and Reliable File Transfers Backed by Top Security Certifications Icon
Compliant and Reliable File Transfers Backed by Top Security Certifications

Cerberus FTP Server delivers SOC 2 Type II certified security and FIPS 140-2 validated encryption.

Stop relying on non-certified, legacy file transfer tools that creak under the weight of modern security demands. Get full audit trails, advanced access controls and more supported by an award-winning team of experts. Start your free 25-day trial today.
Start Free Trial
Rate This Project
Login To Rate This Project

User Reviews

Be the first to post a review of Rebass Grid!

Additional Project Details

Programming Language

JavaScript

Related Categories

JavaScript Software Development Software

Registered

2022-06-22