What is a grid?
A grid system allows for content to be stacked both vertically and horizontally in a consistent and easily manageable fashion.
- Productivity. Simple and predictable layout scaffolding. Formulate page struture quickly without second guessing its precision or cross-browser compatibility.
Versatility. Layouts can be constructed, being adaptable in varying combinations of rows and columns. They even support nested grids for more complex use cases. No matter your layout requirements, a grid system is almost certainly well suited.
Responsive. Easy to create mobile friendly interfaces that are adaptable to different sized viewports.
- Standard 12 columns or unlimited number of columns
- Easy same height columns
- Easy vertical alignment
- Easy reordering
- No awkward overhangs for wrapping content
- Mix fixed and fluid content
- Fallbacks to display: table for IE 8-9, full functionality except ordering / distribution.
- No hacks to learn.
What is Flex?
Flex has the ability to alter its items' width and/or height to best fill the available space on any display device. A flex container expands items to fill available free space, or shrinks them to prevent overflow resulting in less columns appearing out of place and a cleaner layout.
- display: flex; | Use flex on container (.row) | Any direct children are flex items
- flex: 1 0 auto; | Control behavior for flex items (.col) | shorthand for flex-grow, flex-shrink, flex-basis
- flex-grow: integer; | Can it grow above basis? 0 = no, 1 = yes, 2 = twice as fast as siblings
- flex-shrink: integer; | Can it shrink below basis? 0 = no, 1 = yes, 2 = twice as fast as siblings
- flex-basis: auto / % / px / em; | Grow Shrink from this point | Auto uses width property and if that is auto, it uses the contents
- Any direct child of a display:flex container (i.e. .row) is recognized as a flex item (.col-) even without a class name. This is standard behavior and not part of this grid.
- Position: fixed / absolute containers are taken out of flex flow.
- Entensive Guide for understanding all of the properties of flex. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Tested in Chrome, Firefox, Safari, IE 10 / 11. Falls back to table behavior with most functionality for IE 8,9.
<!--[if lte 9]>
<link rel="stylesheet" type="text/css" href="grid-ie.css" />
Source LESS files
row > column > content
Standard 12 Columns
Percent based widths allow fluid resizing of columns and rows.
Responsive modifiers enable different behaviors at different screen sizes. i.e. column widths, offsets, alignment and distribution.
Responsive modifiers apply to devices with screen widths greater than or equal to the target size, and override grid classes at smaller target sizes.
- -xs > 0;
- -sm ≥ 480px;
- -md ≥ 768px;
- -lg ≥ 1200px;
- -xl ≥ 1400px;
- .col-xs-10 applies to everything greater than zero unless there is another class targeting a greater width.
- .col-md-6 applies to everything greater than or equal to 768px unless there is another class targeting a greater width.
Leave the width off for automatically divided columns with equal spacing.
Content Based Column Width
Add any number of auto sizing columns to a row with table-auto class for columns based on content width. Sets the columns to flex:1 1 auto;
Quite a lot more content is in this cell
Little Bit Less
Fixed + Fluid
Set one column to flex: 0 0 width; using .flex-fixed(@width); mixin
Nest grids inside grids inside grids. All columns having padding of 1 rem and 0 margin. Row's have margin bottom of 1 rem except the last row in a series.
Structure: row > col > row > col
- Offset a column using left margin. Affects siblings.
If you're supporting IE9 or lower you would use an empty column instead of these classes.
- Position relative left (push) and right (pull) columns. Doesn't affect siblings.
If you're supporting IE9 you should fill all 12 columns.
Simple Order Changing with push pull
By default when there is insufficient room, entire columns will wrap. Add .no-wrap to your row to disable this.
Nothing wraps in IE9 already.
Note: Vertical alignment will make direct children into block elements and this cannot be overriden. Wrap your content in a div or other container to maintain expected appearance.
Add classes to distribute the contents of a row or column. No support for IE9 and below.
Area AROUND columns is spaced evenly.
Area BETWEEN columns is spaced evenly.
Add classes to reorder columns. No support for IE9 and below.
.REVERSE- / .FORWARD-
Responsive Hide / Show
Only visible on target width. Items receive display: none by default.
Show using display:block
Show using display:inline-block
Show using display:inline
Only hidden on target width.