{{#markdown}}
The Tetra UI grid is a percentage-based, nestable grid system. Each grid row (**.gr**) takes up 100% of the parent containers' width and can contain up to 5 grid units (**.gu**). These grid units can then contain nested grid rows, maximizing flexibility and laying the foundations for a responsive layout.

When creating layouts, it is often useful to have a guide. To do this just add the **.gr-zebra** class to your grid row (**.gr**)
{{/markdown}}