It's a 12 Box layout by default.
-- But you can change the amount of Boxes by adding the - `divisions` property to a Container. -
-It's fully embeddable as well!
-+ +Defining breakpoints gives you strong control over the way your content is rendered at various screen sizes. Any property that can be set on `Grid.Box` can be set per-breakpoint. Here's a few things to keep in mind when defining breakpoints: + +- Breakpoints can be named whatever you'd like (with a few exceptions laid out in the next section) +- When defining breakpoints, you must pass an array object containing **only** two values: the min and max (both must be integers) +- Breakpoints can have overlapping values. Use responsibly though, as it's possible to produce unexpected results when setting conflicting values on a `Grid.Box` with overlapping breakpoints. i.e. if `mobile` and `tablet` have overlapping pixels, don't make a `Grid.Box` hide on mobile and show on tablet. + +
+ +Although you can name breakpoints whatever you want, there are a few names that we do not recommend using because they will conflict with existing property names. Most of these are pretty obvious and would never come up in real usage, but it's worth having a list here just to be sure! + +- `background` +- `border` +- `checked` +- `className` +- `dangerouslySetInnerHTML` +- `display` +- `height` +- `hidden` +- `htmlFor` +- `margin` +- `onChange` +- `opacity` +- `padding` +- `selected` +- `style` +- `suppressContentEditableWarning` +- `suppressHydrationWarning` +- `value` +- `visibility` +- `width` + +
A no-frills flex-box grid system
-- This row is hidden on xs -
-- This row is hidden on sm -
-- This row is hidden on md -
-- This row is hidden on lg -
-