react-gridzilla

Gridzilla

Gridzilla is a responsive, mobile-first flexbox grid system for React based projects.

   

Installation

Install with npm

npm install --save react-gridzilla

Install with yarn

yarn add react-gridzilla

   

How it works

In a nutshell, there are three major components: Containers, Grids, and Units.

Containers center your site's contents and help align your grid content.

Grids are groups of units that ensure your units are lined up properly.

Content should be placed within units, and only units may be immediate children of grids.

Quick Usage Example:

<Container>
  <Grid>
    <Unit>One of three units</Unit>
    <Unit>One of three units</Unit>
    <Unit>One of three units</Unit>
  </Grid>
</Container>

   

Containers

Containers are required when using the grid system. Choose from a responsive fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it's 100% wide all the time).

All containers have a maximum width of 100% and while containers can be nested, most layouts do not require a nested container.

Fluid-width Container

A fluid container is always 100% wide (full width of its parent) and at the same time preserves all default Container properties such as margin and padding.

<Container fluid>
    Content goes here...
</Container>

Fixed-width Container

A fixed width container is the same as a fluid width container with the exception that it has a predefined maximum width.

There are five sizes available: xlarge (1140px), large (960px), medium (750px), small (544px) and xsmall (100%).

Each size has a short alias: xlarge (xl), large(lg), medium(md), small (sm) and xsmall (xs).

<Container xlarge> Extra large container </Container>
<Container xl> Also an extra large container </Container>

Custom width Container

If you want to set a custom size for your container, use the size property which accepts the maximum width as a string:

<Container size="650px">
    This is a custom size container
</Container>

Auto-sizing Container

By default, a fixed-width container will span the full width of its parent if the viewport width is less than the breakpoint value that corresponds to the container size. On the other hand, an auto-sizing container will automatically shrink to the largest predefined size that can fit in the viewport. For example, an auto-sizing xlarge container will automatically become a large container if the viewport width is less than 1200px but more than 992px.

<Container autoSize xlarge>
    Auto-sizing extra large container
</Container>

Here is a handy table that demonstrates the width of each container type across the different breakpoints supported by the grid system:

Container type	Container width across breakpoints
Extra small <544px	Small ≥544px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Extra small xsmall, xs	100%
Small small, sm	100%	544px
Medium medium, md	100%	544px	750px
Large large, lg	100%	544px	750px	960px
Extra large xlarge, xl	100%	544px	750px	960px	1140px

Grid

Unit

Tiles

   

License

MIT