Grid
# Intro
The grid system is a 12 column flexbox based responsive layout. This system is similar to other popular frameworks but with better class conventions.
# Breakpoints
| Breakpoint | Prefix | Viewport | Max-Width |
|---|---|---|---|
| Extra Small | xs | < 576px | none |
| Small | sm | >= 576px | 540px |
| Medium | md | >= 768px | 720px |
| Large | lg | >= 992px | 960px |
| Extra Large | xl | >= 1200px | 90% |
# Containers
Containers are required to use the grid system and work with rows or other containers. Use the container class to set the max-width of each breakpoint. You can add the -fluid modifier to the container to have the width set to 100% at all breakpoints.
container -fluid container. This is an example of why nested containers can but shouldn't be used! To created nested layouts use nested rows. # Rows
Rows should be wrapped inside a container and should contain other rows, for nested layouts, or columns.
# Columns
You can use equal-length columns inside rows by using the column class. To have the width of a column set to auto based on the content use the -auto modifier. To specify the width of the column on all breakpoint you can use the -1 to -12 modifiers. To use the responsive behavior of stacking on certain breakpoints you can add the xs, sm, md, lg, and xl keywords before the width to form repsonsive classes for columns. You can specify the width of each breakpoint by combining column modifiers.
# Offsets
Offsets can be added to a column. You can specify a column offset by using the offset modifier with the same naming as the breakpoint modifiers. You should match any breakpoint modifier with a corresponding offset modifier. Offsets are always added to the left of a column.