Grid
Grids serve as the primary method for laying out "Design 2.0" websites, and are broken up into smaller components called cells. Grids are mobile-friendly by default, with various breakpoints (e.g., "medium," "large") included by default. Grids are also infinitely nestable, allowing for complex layouts. (Grids deeper than 3-4 levels will probably start to look really weird, though.)
- Simple Examples
- Breakpoints
- Horizontal Arrangement
- Vertical Arrangement
- Nested
- Column Offsets
- Expanding/Collapsing Columns
- Block Grid
General Notes
- A grid is contained within a
divwith the "grid" class -- except for a block grid, which is contained contained within aul. - Each grid column is set by a
divwith the "grid-col" class -- except for a block grid, where each columns is set by ali. - By default, a grid column will span the entire width of its parent grid element. This is for better mobile compatibility.
- A grid columns's width can be modified with helper classes that begin with "grid-col--". These classes control how wide it can be at different breakpoints. A column can be 1-12 columns wide, with 12 being full-width.
- A class beginning with "grid--" must be applied to a "grid" element and a class beginning with "grid-col--" must be applied to a "grid-col" element. Since they extend the "grid" and "grid-col" classes respectively, those classes shouldn't be used on their own.
Class Reference
| Class | Info |
|---|---|
| grid | Creates a new grid element. |
| grid--reverse | Displays the grid's columns in reverse order. |
| grid--compact | Displays the grid without any gutters between its columns. |
| grid--[breakpoint]-start | Children are aligned towards the start of the grid. |
| grid--[breakpoint]-center | Children are centered inside the grid. |
| grid--[breakpoint]-end | Children are aligned towards the end of the grid. |
| grid--[breakpoint]-around | Children are evenly distributed within the grid. |
| grid--[breakpoint]-between | Children are evenly distributed within the grid. The first child is pushed to the start, the last child to the end. |
| grid--[breakpoint]-top | Children are vertically aligned to the top of the grid. |
| grid--[breakpoint]-middle | Children are vertically aligned to the middle of the grid. |
| grid--[breakpoint]-bottom | Children are vertically aligned to the bottom of the grid. |
| grid--block | Creates a new block grid. |
| grid--block-horz-[alignment] | Controls the horizontal alignment of a block grid's elements. Available Values: "left", "center", "right" |
| grid--block-vert-[alignment] | Controls the vertical alignment of a block grid's elements. Available Values: "top", "middle", "bottom" |
| grid--block-[breakpoint]-[columns] | Specify how many columns the grid should be divided into for that breakpoint. |
| grid-col | Creates a new grid column. |
| grid-col--[breakpoint]-[columns] | This class is used to define how many columns wide the column should be for that breakpoint. |
| grid-col--[breakpoint]-expand | If set for a certain breakpoint, then it will expand as wide as possible for that breakpoint. |
| grid-col--[breakpoint]-shrink | If set for a certain breakpoint, then it will shrink as much as possible for that breakpoint. |
| grid-col--[breakpoint]-push-[columns] | Used to "push" grid columns around inside their parent grid. The number of columns specified can be 1-11. |
| grid-col--[breakpoint]-first | Displays the column at the beginning of the grid. |
| grid-col--[breakpoint]-last | Displays the column at the end of the grid. |